单击某个区域后，JavaScript弹出窗口没有关闭

Question

在tumblr博客上，我要这样做，因此当您在jquery弹出窗口之外单击时，它将关闭。 基本上，现在的设置方式是单击“询问”链接时，它会弹出并带有表单以提交询问。 但是，当我单击任意位置时，它什么也没做。 我正在使用此脚本 ，下面是其片段：

<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>

Answer 1

我为此做了一个功能

// window click function
function OnwindowClick(elem , action){
    $(document).on('click',function(e){
        if (!$(elem).is(e.target) // if the target of the click isn't the container...
            && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
        {
            action();
        }
    });
}

你可以像这样使用它

OnwindowClick('button , yourpopup .Class or #Id', function(){
   // hide the popup
});

Example简单的例子

 $(document).ready(function(){ $('.showpopup').on('click' , function(){ $('#popup').fadeIn(); }); OnwindowClick('.showpopup , #popup', function(){ $('#popup').fadeOut(); }); }); // window click function function OnwindowClick(elem , action){ $(document).on('click',function(e){ if (!$(elem).is(e.target) // if the target of the click isn't the container... && $(elem).has(e.target).length === 0) // ... nor a descendant of the container { action(); } }); } 

 #popup{ position : fixed; padding : 50px; text-align : center; font-size: 30px; margin : 30px; border: 5px solid #eee; background : yellow; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="showpopup">Show PopUp</button> <div id="popup"> This is a Pop Up </div> 

Answer 2

听起来您想要一个“模式”弹出窗口。 由于您使用的是JQuery，因此可以使用“ Jquery UI”对话框轻松完成此操作，例如：

        $( "#your_id" ).dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });

如果您使用Google“ jquery ui对话框”，则可以找到完整的说明。