Question

我知道有一些与此主题相关的链接，但我的问题没有解决。所以我创造了一个新的首先，我需要在对话框外单击时关闭一个纯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中添加了这段代码。所以有人可以帮助吗？谢谢！

Answer 1

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

$(window).bind('click', function(event) {
    //....
    else if(event.target.id!='log'){ 
        $('.ui-dialog-content:visible').dialog('close'); 
    }
    //....
}

Answer 2

$('#myBox').dialog({
   open: function(event, ui) {                      
       $('.ui-widget-overlay').click(function() {
           $('#stickerBox').dialog('close');
       });
   }
});

Answer 3

Seker的，

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

同时在$(window).click()事件上设置$('#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');
        }
    });
});

单击对话框时关闭jquery ui对话框

3 个答案: