Isabela Cristina Isabela Cristina - 3 months ago 9
Javascript Question

Do not hide modal while clicking Left/Right in overlay

I need this modal to not hide when you click in the overlay area (right or left button).

Example: when your click right button in overlay area, hide the modal.
The modal do not hide when your clicked in overlay, something clicked in "closed button".

Thank you!



jQuery(document).ready(function(){
jQuery('#popup-container a.close').click(function(){
jQuery('#popup-container').fadeOut();
jQuery('#active-popup').fadeOut();
});

var visits = jQuery.cookie('visits') || 0;
visits++;

jQuery.cookie('visits', visits, { expires: 1, path: '/' });

console.debug(jQuery.cookie('visits'));

if ( jQuery.cookie('visits') > 1 ) {
jQuery('#active-popup').hide();
jQuery('#popup-container').hide();
} else {
var pageHeight = jQuery(document).height();
jQuery('<div id="active-popup"></div>').insertBefore('body');
jQuery('#active-popup').css("height", pageHeight);
jQuery('#popup-container').show();
}

if (jQuery.cookie('noShowWelcome')) { jQuery('#popup-container').hide(); jQuery('#active-popup').hide(); }
});

jQuery(document).mouseup(function(e){
var container = jQuery('#popup-container');

if( !container.is(e.target)&& container.has(e.target).length === 0)
{
container.fadeOut();
jQuery('#active-popup').fadeOut();
}

});

/* Fullscreen overlay for modal background */
#active-popup {
background-color: rgba(52,73,94, 0.7);
position: absolute;
width: 100%;
heighT: 100% !important;
top: 0;
left: 0;
z-index: 999;
}

/* Modal container */
#popup-container {
width: 45%;
height: 65%;
margin: 0 auto;
margin-top: 5%;
position: fixed;
left: 28%;
z-index: 999;
top: 0;
display: none;
background: #E74C3C;
}

.modal-content {
position: relative;
text-align: center;
}

#popup-window { position: relative; }

.modal-content h1,
.modal-content p { color: #fff; }

.modal-content p { padding: 20% 5% 0 5%; }

/* Close button */
#popup-container a.close {
position: relative;
float: right;
top: -15px;
right: -7px;
z-index: 99;
font-weight: bold;
font-size: 16px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 2px 5px 2px 6px;
line-height: 1em;
text-align: center;
background: #E74C3C;
border: 4px solid #fff;
cursor: pointer;
color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>



<div id="popup-container">
<a class="close">x</a>
<div id="popup-window">
<div class="splash-bg">
<a href="#" class="your-class"></a>
<h1><a href="http://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Popup Window</h1>
<p>...</p>
</div>
</div>
</div>




Answer

By the look of it your overlay should hide, if this piece of code is fixed to be:

jQuery(document).mouseup(function(e){
  var container = jQuery('#popup-container');
  var activePopup = jQuery('#active-popup');

  if(container.is(e.target) && !activePopup.container.is(e.target) && activePopup.has(e.target).length === 0) {
    container.fadeOut();
    activePopup.fadeOut();
  }

});

So if you don't want the container to close model, remove above code.

Comments