单击区域时，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

听起来您想要一个"模态"弹出窗口。由于您正在使用jQuery，因此可以使用jQuery UI对话框轻松完成此操作，例如：

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

如果您Google" jQuery UI对话框"，则可以找到完整的说明。

Answer 2

我为此

赢得了功能

// 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
});

ُ简单示例

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