Close pop up by clicking on body

Question

I have put javascript and css pop up in my magento application. I can close the pop up by clicking on close button on pop up, but if user clicks elsewhere(out of pop up window) on the page pop up should be closed.

Check this - > http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere — Rikesh, Dec 23 '11 at 07:14
Thanks but unfortunately I can't use Jquery in that page. So I have to solve in Javascript only. — Viralk, Dec 23 '11 at 07:16
Is it pop-up window or a shadowbox? Are you using some kind of plugin for this or is it your own? Give us some code! Give us something to work with. — Ayman Safadi, Dec 23 '11 at 07:16

score 0 · Accepted Answer · edited May 23 '17 at 11:55

See this question: Use jQuery to hide a DIV when the user clicks outside of it

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

So you check if the mouse is inside your popup div, and when it is not, you will close it onclick. If you provide some more code we can help you get that set up

score 0 · Answer 2 · answered Dec 23 '11 at 07:52

maybe this helps you. I would recommend jQuery but as far as you can't use it maybe thats the solution for you.

 <script type="text/javascript">
    document.onclick=check;
    function check(e){
    var target = (e && e.target) || (event && event.srcElement);
    var obj = document.getElementById('body');
    if(target!=obj){obj.style.display='none'}
    }
  </script>

And if you have to "toggle" it maybe this helps you:

<script type="text/javascript">
  document.onclick=check;
  function check(e){
    var target = (e && e.target) || (event && event.srcElement);
    var obj = document.getElementById('mydiv');
    var obj2 = document.getElementById('sho');
    if(target!=obj&&target!=obj2){
      obj.style.display='none'
    }
    else if(target==obj2){
      obj.style.display='block'
    }
    }
    </script>

Close pop up by clicking on body

2 Answers2