bpopup confirmation
HTML
<link rel="stylesheet" href="http://dinbror.dk/bpopup/assets/style.min.css">
<script src="http://phillip.com.pl/pub/jquery.bpopup.js"></script>
<span class="button small pop1" data-bpopup='{"modalClose":true,"opacity":0.6,"positionStyle":"fixed"}'>Pop it up</span>
<div class="example">
<a href="#" class="b-close">X</a>
<strong>I'm a box</strong>
<br>
<em>You cannot close me without confirmation</em>
</div>
CSS
.example {
width:300px;
padding : 20px;
background-color: #292929;
border-radius: 7px;
}
.b-close {
border-radius: 7px;
font: bold 131% sans-serif;
padding: 0 6px 2px;
background-color: #2b91af;
color: #fff;
cursor: pointer;
text-align: center;
text-decoration: none;
position: absolute;
right: -7px;
top: -7px;
}
.b-close:hover {
background-color: #1e1e1e;
}
JavaScript
;(function($) {
// DOM Ready
$(function() {
$('.example').hide();
$('.pop1').bind('click', function(e) {
e.preventDefault();
$('.example').bPopup({
confirmClose: function(){
if(confirm('Are You Sure?')){
return true;
}
return false;
}
})
});
});
});