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

Question

<a href="javascript:void(0)" onclick = "document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'"><button type="button" name="" value="" id="readmorelink3">+<span class="rmore">Read More</span></button></a>

I'm using the above DOM classic onClick to simply display divs as a simple pop-up. I have created a close button within the div but I would also like to have the open divs hide when the user clicks the body or anywhere that isn't the open div. I have tried absolutely everything --

My simple Overlay (1 of 3)

<!-- read more overlays 1 -->

<div id="light" class="white_content">

<a class="close" href="javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="textright" style="color: #DDD !important; float:right;">CLOSE X</a>

<h4>[Hey+]</h4>
<h3>Demo</h3>
<h3>SUP</h3>
<span> 2.5 fl. oz.</span><br>
<br>
<p>
Cool content, about cool things.
</p>

</div>

<!-- // read more overlays 1-->

I tried this guy:

$(document).click(function() {
    $('#mydiv').fadeOut(300);
});

I've messed with this guy:

 if($('#mydiv').is(":not(:visible)") ){

// and visa versa if visible etc

Also have tried.

 // To prevent hide #menu when click on #main
    $('#mydiv').click(function (e) {
        e.stopPropagation();
});

 // Click outsite of #menu
    $('html').click(function () {
    $('#mydiv').hide();
});

Realizing I have should have done this with simple jQuery and not inline; but I don't want to redo everything so seeking DOM / JavaScript solution. Simply to close the open or display: block divs > when they are displayed, by in addition clicking outside of the element or on body tag.

EG: DIV OVERLAY IS DISPLAYED > CLICK OUTSIDE OF ELEMENT AND IT CLOSES. I ADDED ONCLICK CLOSE BUTTON TO THE BODY TAG, BUT IT KILLED POPUP ENTIRELY, ADDED A WRAPPER, NO CIGAR.

I've +1'd this for your realization about inline but should also say that it's not just a best practice to avoid inline js there are serious security concerns — hammus, Apr 25 '14 at 03:33

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

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

jsBin demo

The simplest way:

 <a data-pop="1">Call popup 1</a>
  
 <div data-popup="1">
   <h2>
     Popup 1 title
     <span data-pop>&times;</span>
   </h2>
   <div>
     <p>Pop 1 description...</p>
     <button data-pop>OK</button>
   </div>
 </div>

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

  <h1>Modal window Test</h1>
  
  <button class="modalOpen">SHOW MODAL</button>
  <p>Some paragraph...</p>
  
  <div id="modalOverlay">
    <div id="modal">
      <span class="modalClose">&times;</span>
      <h3>Modal</h3>
      <button>Some button to test inner propagation</button>
      <button class="modalClose">Close modal</button>
    </div>
  </div>

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.

@leemo :) thanks so much! I'll make a coffee now and enjoy all this kindness ;) — Roko C. Buljan, Apr 25 '14 at 04:35
you're welcome, you're answer gave me some ideas for a project I'm working on. I never think to go with full screen overlays but there are so many benefits. Cheers. — hammus, Apr 25 '14 at 05:50
@leemo uhh... i've done an extensive research ans tests on http://jsbin.com/gokuf/5/ (5 and 0 to 8) and ended up with this approach I always used. None of the other suggestions I've seen on this popular problem http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element was complete and explained. Even the accepted answer is the worse possible solution. — Roko C. Buljan, Apr 25 '14 at 07:08

hammus · Answer 2 · 2014-04-25T04:08:27.093

1

A quick (maybe slightly computationally expensive) dirty hack would be something like:

$("body").click(function() {

    $(".white_content").each(function(){
        if($(this).css("display") !== "none")
        { 
            $(this).hide();
        }
    });
});

Working fiddle.

edited Apr 25 '14 at 04:08

answered Apr 25 '14 at 03:39

hammus

2,602
1
16
36

Yes; but it requires a rewrite of my code of onClick - so it's basically a different approach; thanks tho! – Fred Randall Apr 26 '14 at 02:43

Naveen Chandra Tiwari · Answer 3 · 2014-04-25T05:25:37.350

0

Try this:

  $("body").click(function (e) {
            var elt = $(e.target);
    if (!($(e.target).attr("id") == "light") && !($(e.target).parents("div").attr("id")=="light"))
            {
                $("#light").hide();
            }
        });

Its depends on your conditions. Anyways I have edited my post, you can check now.

edited Apr 25 '14 at 05:25

answered Apr 25 '14 at 04:17

Naveen Chandra Tiwari

4,895
2
18
26

1

This is a bad answer. http://jsbin.com/lehuz/2/edit :( – Roko C. Buljan Apr 25 '14 at 04:57
You meant something like this? http://jsbin.com/lehuz/3/edit which is still a bad example cause if you have a button inside a popup will trigger the close event. so.... – Roko C. Buljan Apr 25 '14 at 04:59
I have updated the answer. – Naveen Chandra Tiwari Apr 25 '14 at 05:26
if you already use native `e.target` than why not use `e.target.id === "light"` ? Also if you don't set in CSS `body{height:100%}` your body will be as tall as the inner content. So it's not good. A user might click on `"html"` but your modal will not go away. – Roko C. Buljan Apr 25 '14 at 06:53

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

3 Answers3

Instead,

Linked