關閉jquery ui對話框時點擊了對話框

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

Seker的，

我會建議你使用event.preventDefault()第一個點擊。

還在$('#log').click()事件上設置了$(window).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'); 
     } 
    }); 
}); 

Answer 3

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