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 
$('#myBox').dialog({
   open: function(event, ui) {                      
       $('.ui-widget-overlay').click(function() {
           $('#stickerBox').dialog('close');
       });
   }
});
于 2012-06-11T17:51:33.580 に答える
1

イベント ソースがボタンでないかどうかを確認します。

$(window).bind('click', function(event) {
    //....
    else if(event.target.id!='log'){ 
        $('.ui-dialog-content:visible').dialog('close'); 
    }
    //....
}
于 2011-07-25T07:19:43.920 に答える
0

セケル、

最初のクリックに使用することをお勧めし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');
        }
    });
});
于 2011-07-25T06:03:27.080 に答える