1

我知道已经存在一些与该主题相关的链接，但我的问题没有解决。所以我创建了一个新的。
首先，当在对话框外单击时，我需要关闭纯 jquery ui 对话框。所以首先我用这段代码创建了对话框： 

<div id="login_panel" align=center style="display:none;">
    <div id="add_predicts_popup1">
        <div id="login_msg" align=center class="messagebox" style="display: none; width: 593px;height: 18px;" ></div>
        <form name="log_form" id="log_form" method="get">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr><td><h1>Enter Your Username and Password</h1></td><br></tr>
            <tr><td><input name="txtuser" type="text" class="textpart" id="txtuser" onclick="closeMsg('login_msg')"/></td>
            <td>&nbsp;</td>
            </tr>
            <tr><td><input name="txtpass" type="password" class="textpart" id="txtpass" />&nbsp;&nbsp;</td>
            <td><input name="btnlog" type="button"  class="predict_button2" id="btnlog" value=" " /></td>
            </tr>
            <tr>
            <td class="add_predicts_popup-style_01"><a href="#" onclick="register('register')">Register Now</a> l   <a href="#" onclick="register('forgot')">Forget Password?</a></td>
            </tr>
            </table>
        </form>
    </div>
</div>

显示我使用的对话框， 

<script type='text/javascript'>
$('#log').click(function(){
        $('#add_predicts_popup1').dialog({
        modal:true,
        width:608,
        height:225,
        title:"Log in"
        });   
        });
</script>
<a href=\"#\" id=\"log\">Login</a>

这很好用，我添加了一个代码来关闭框，例如， 

$(window).click(function(event) {
    if (($(event.target).closest('.ui-dialog')).length>0) {
        // if clicked on a dialog, do nothing
        return false;
    } else {
        // if clicked outside the dialog, close it
        $('.ui-dialog-content:visible').dialog('close');
    }
})

在此之后，对话框不显示。我在 document.ready 中添加了这段代码。那么有人可以帮忙吗？谢谢！。

4

3 回答 3

1

检查事件源是否不是按钮。

$(window).bind('click', function(event) {
    //....
    else if(event.target.id!='log'){ 
        $('.ui-dialog-content:visible').dialog('close'); 
    }
    //....
}
于 2011-07-25T07:19:43.920 回答
1 
$('#myBox').dialog({
   open: function(event, ui) {                      
       $('.ui-widget-overlay').click(function() {
           $('#stickerBox').dialog('close');
       });
   }
});
于 2012-06-11T17:51:33.580 回答
0

寻求者，

我建议您使用event.preventDefault()第一次点击。

还设置$(window).click()on$('#log').click()事件并在执行后删除该事件。

可能对你有帮助。

$('#log').bind('click', function(event){
    // The default event is been cancelled
    event.preventDefault();

    $('#add_predicts_popup1').dialog({
        modal:true,
        width:608,
        height:225,
        title:"Log in"
    });

    // Adding the click event to close the Dialog.
    $(window).bind('click', function(event) {
        if (($(event.target).closest('.ui-dialog')).length>0) {
            // if clicked on a dialog, do nothing
            return false;
        } else {
            // if clicked outside the dialog, close it
            $('.ui-dialog-content:visible').dialog('close');

            // remove the click of window.
            $(window).unbind('click');
        }
    });
});
于 2011-07-25T06:03:27.080 回答