Question

在tumblr博客上，我想在jquery弹出窗口外单击时这样做，它会关闭。基本上，它现在的设置是当你点击＆＃34;问＆＃34;链接，弹出表单提交问题。但是，现在当我点击任何地方时，它什么也没做。我正在使用this script，这是一个片段：

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

简单示例

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

听起来你想要一个＆＃34;模态＆＃34;弹出。由于您使用的是JQuery，因此可以使用Jquery UI对话框轻松完成，例如：

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

如果你google＆＃34; jquery ui dialog＆＃34;你可以找到完整的说明。

点击一个区域后Javascript弹出窗口没有关闭

2 个答案: