Javascript弹出窗口在单击区域外时不关闭

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

$（文档）.ready（函数（）{
//
$（'a.poplight[href^=#]'）。单击（函数（）{
var popID=$（this.attr（'rel'）；//获取弹出窗口名称
var popURL=$（this.attr（'href'）；//获取Popup href以定义大小
var query=popURL.split（“？”）；
var dim=query[1]。拆分（'&'）；
var popWidth=dim[0]。拆分（'='）[1]；//获取第一个查询字符串值
$（'#'+popID）.fadeIn（）.css（{'width'：Number（popWidth）}）.prepend（''）；
var popMargTop=（$（'#'+popID）.height（）+80）/2；
var popMargLeft=（$（'#'+popID）.width（）+80）/2；
//将边距应用于弹出窗口
$（'#'+popID）.css({
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
$（'body'）。追加（''）；
$（#fade'）.css（{'filter'：'alpha（不透明度=80）}）.fadeIn（）；//淡入淡入淡入层-.css（{'filter'：'alpha（不透明度=80）}）
返回false；
});
$（'a.close，#fade'）.live（'click'，function（）{
$（'#淡入，.popup#u块'）。淡出（函数（）{
$（“#淡入，a.close”）.remove（）；//将它们淡出
});
返回false；
});
});

我为此制作了一个函数

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

ُ简单示例

$（文档）.ready（函数（）{
$（'showpopup'）。在（'click'，function（）上{
$（'弹出'）.fadeIn（）；
});
OnwindowClick（'.showpopup，#popup'，function（）{
$（'弹出'）.fadeOut（）；
});
});
//窗口点击功能
WindowClick上的函数（元素、操作）{
$（文档）。在（'单击'）上，函数（e）{
if（！$（elem）.is（e.target）//如果单击的目标不是容器。。。
&&$（elem）.has（e.target）.length==0）/…或容器的后代
{
动作（）；
}
});
}

#弹出窗口{
位置：固定；
填充：50px；
文本对齐：居中；
字体大小：30px；
利润率：30像素；
边框：5px实心#eee；
背景：黄色；
显示：无；
}

显示弹出窗口
这是一个弹出窗口

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

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

如果你在谷歌上搜索“jqueryui对话框”，你可以找到完整的说明。

你有没有玩弄过

#fade

？因为当你点击这个脚本时，弹出窗口就会关闭。