Закрыть всплывающее окно, щелкнув по телу

Question

Я разместил javascript и css в моем приложении magento. Я могу закрыть всплывающее окно, щелкнув по кнопке закрытия при всплывании, но если пользователь нажимает на другое место (вне всплывающего окна) на всплывающем всплывающем окне, он должен быть закрыт.

Answer 1

Смотрите этот вопрос: 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(); 
    }); 
}); 

Таким образом, вы убедитесь, что мышь находится внутри всплывающего DIV, а когда это не так, вы закроете его OnClick. Если вы предоставите еще какой-нибудь код, мы сможем помочь вам в настройке

Answer 2

Возможно, это вам поможет. Я бы порекомендовал jQuery, но насколько вы не можете его использовать, возможно, это решение для вас.

<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> 

И если у вас есть, чтобы "переключить" это, возможно, это поможет вам:

<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>