Question

上尝试了以下操作

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>。

在最开始时将此行添加到该“click”处理程序：

    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/

无法关闭JSFiddle上的对话框

2 个答案: