javascript - 无法关闭 JSFiddle 上的对话框

Question

我在JSFiddle上尝试过以下操作

HTML：

<div id="dialog" title="Basic dialog">
  <p>Hello.</p>
</div>

<a href="www.google.com">Link</a>

JavaScript

$(document).ready(function() {
    $( "#dialog" ).dialog({ autoOpen: false }); 
    $(document.body).on('click',"a",function(event){ 
        event.preventDefault();        
        $("#dialog").dialog('open');
    });  
});

当我点击关闭按钮时，我无法关闭对话框。为什么？

Answer 1

当关闭单击冒泡到文档级别时，您正在重新打开对话框。对话框关闭 [x] 也是一个<a>。

将此行添加到该“单击”处理程序的开头：

    if ($(this).hasClass('ui-dialog-titlebar-close')) return;

或者，您可以通过给它一个类或其他东西来使您的“打开对话框”链接更具体：

    <a href=# class=open-dialog>Link</a>

然后：

    $('body').on('click', '.open-dialog', function(event) {
      event.preventDefault();
      $('#dialog').dialog('open');
    });

通过使打开对话框的链接与关闭按钮不同，您可以避免歧义。

Answer 2

您必须定义 CLOSE 函数：

HTML

<div id="dialog" title="Basic dialog">
  <p>Hello.</p>
</div>

<a id="open" href="www.google.com">Link</a>

JavaScript

$(document).ready(function() {

    $( "#dialog" ).dialog({ autoOpen: false });

    $(document.body).on('click',"#open",function(event){ 
        event.preventDefault();        
        $("#dialog").dialog('open');
    });   

    $(document.body).on('click',".ui_icon_closethick",function(event){ 
        event.preventDefault();        
        $("#dialog").dialog('close');
    }); 
});

工作解决方案：http: //jsfiddle.net/QTqUr/1/