Когда пользователь нажимает на существующий модал, он работает нормально, когда пользователь нажимает кнопку, он не закрывает модальный, но должен
Мы безуспешно пытались исправить
<div style="display: none; width:100%; height:100%; position:fixed;
background:#000000; opacity: .8; filter:alpha(opacity=0.8); z-index:999998;
top: 0px;" id="exitpopup_bg">
</div>
<div style="display:none; position:fixed;-webkit-border-radius: 4px; -moz-
border-radius: 4px; border-radius: 4px; z-index:999999;" id="exitpopup">
<div class="model-title2">
<h3>WAIT! Do Not Leave This Page!<br>
It Will Cause Errors In Your Order...</h3>
</div>
<div class="model-body animatedParent">
<p>Do NOT hit the back button or close your browser.<br>
<br>
<strong>Click the 'Finish Reading This Page' button below and
make your decision on this page to complete your order.</strong></p>
<div style="margin:15px 0;">
<p style="position:relative;" class="text-center animatedParent"><a
href="#next" class="repeatAnim btn btn-lg btn-success lead animated shake
go" style="font-size:30px;">Finish Reading This Page</a></p>
</div>
</div>
</div>
<!-- END: MODAL BOX -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
<!-- Used to fire the modal -->
<script>
$( document ).ready(function() {
$(document).mouseleave(function(e) {
$('#exitpopup').css('left', (window.innerWidth/2 -
$('#exitpopup').width()/2));
$('#exitpopup').css('top', (window.innerHeight/2 -
$('#exitpopup').height()/2));
if(!$('#exitpopup_bg').hasClass("efired"))
{
// Show the exit popup
$('#exitpopup_bg').fadeIn();
$('#exitpopup').fadeIn();
$('#exitpopup_bg').addClass("efired");
}
});
$('#exitpopup_bg').click(function(){
$('#exitpopup_bg').fadeOut();
$('#exitpopup').slideUp();
});
});
</script>
Когда пользователь нажимает кнопку, мы ожидаем, что модальное закрывается, и пользователь берется за то, чтобы привязать текстовое пятно в html, но вместо этого пользователь берется за то, чтобы привязать текстовое пятно, но модальное не закрывается.