How to create a custom modal popup - and how to close it clicking outside of it [duplicate]

Answer 1

See this answer: https://stackoverflow.com/a/6144189/383904

---

jsBin demo

The simplest way:

 Call popup 1
  
 

   

     Popup 1 title
     ×
   
   

     
Pop 1 description...
     OK
   
 

CSS

/*** POPUP ***/
[data-popup] {
  display    : none;
  position   : fixed;
  z-index    : 9999;
  right      : 0;
  left       : 0;
  margin     : 45px auto;  
  width      : 50%;
  min-width  : 200px;
  padding    : 15px 25px 25px;
  background : #fff;
  transition: box-shadow 2s;
  box-shadow : 0 0 0 1900px hsla(220,7%,18%,0.6),
           0 10px 30px -5px hsla(220,7%,18%,0.6);
}

jQuery:

// /////
// POPUP

var $popup = $("[data-popup]"),
    pHov   = false;
$popup.hover(function(){ pHov^=1; });
$(document).mousedown(function(){
  if(!pHov) $popup.slideUp(240); 
});

$("[data-pop]").click(function(){
  var n = $(this).data('pop')
  var $popup = n ? $("[data-popup='"+n+"']") : $(this).closest("[data-popup]");
  $popup.slideToggle(240);
});

The above will only fail if you have underneath your Popup an element that on mousedown (not click, just mousedown) uses return false; or event.stopPropagation();, in that case the click will not bubble up the DOM to reach document that triggers the popup hide.
so a better solution to create a modal window that works implies the use of a full-screen parent overlay window that contains the Modal.

---

One of the common pitfalls creating modal / popups

---

Instead,

using a Modal-Parent window, all you need to do is register a click on that element in order to hide it (and his child Modal).
Than you can style that parent and add a nice opaque background or leave it transparent... it's up to your needs. Here's an example:

MODAL LIVE DEMO «

html

  
Modal window Test
  
  SHOW MODAL
  
Some paragraph...
  
  

    

      ×
      
Modal
      Some button to test inner propagation
      Close modal
    
  

css

#modalOverlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.8);
}
#modal{
  position:relative;
  margin:100px auto;
  background:#fff;
  width:300px;
  padding:30px;
  box-shadow: 0 5px 50px -4px #aaa;
}
#modal span.modalClose{
  cursor:pointer;
  font-size:20px;
  position:absolute;
  right:20px;
  top:15px;
}

jquery

var $modalOverlay = $('#modalOverlay'); // Cache your selectors
var $modal        = $('#modal');
var $modalClose   = $('.modalClose');
var $modalOpen    = $('.modalOpen');

$modalOpen.click(function(){
  $modalOverlay.stop().fadeTo(500,1);
});

$modalOverlay.click(function(){
  $modalOverlay.stop().fadeTo(500,0, function(){ $(this).hide(); });
});

$modal.click(function( e ) {
   e.stopPropagation(); // otherwise the click would bubble up to the overlay
});

$modalClose.click(function(){
  $modalOverlay.click(); // simulate click to close modal
});

to summarize, as you can see from the code-idea above we didn't used document or body to listen for pop-up close clicks, we rely exclusively on the modal elements.