JQueryUI如何“自我”关闭对话框

Question

我正在开发一个使用 jQueryUI 并创建大量对话框的 Web 应用程序。对话框各不相同，关闭对话框的按钮最终会在对话框中嵌入多个 div。

我想要一个总是关闭包含对话框的函数。

以下面的html为例：

<div id="demoDialog">
   <div>
      <div id='demoDialogSubmit'>
         <input type='submit' onClick='selfCloseDialog();' value='Ok' style='margin-top:10px' />
      </div>
   <div>
<div>

在我的 js 代码中，我将它初始化为一个对话框：

$( "#demoDialog" ).dialog( params );

现在对于点击我有一些不太好的选择。我可以坚持关闭按钮知道对话框的ID。例如。做类似的事情：

onclick="$( '#demoDialog' ).dialog( 'close' );"

但我宁愿使用通用代码，而不是总是随身携带对话框的 id，以便我可以将其发送到可能关闭它的小部件。

或者我可以记住我在下面多少层：

function selfCloseDialog() { $(this).parent().dialog( 'close' ); }

但我真的希望 selfCloseDialog() 只搜索元素层以寻找要关闭的对话框对象。我该怎么做？

@更新：

所以我让它工作了。感谢大家的建议，这个问题实际上有两个问题。

第一个问题在这里：

<input type='submit' onClick='selfCloseDialog();' value='Ok'/>

应该是：

<input type='submit' onClick='selfCloseDialog(this);' value='Ok'/>

按钮元素不作为函数的“this”参数传入。这现在看起来很明显。

下面的直接方法 JAAulde 有效并且看起来最干净：

function selfCloseDialog( caller ) {
   $(caller).closest( ".ui-dialog-content" ).dialog('close');
}

有几个答案涉及最接近的选择器和选择器 - 但我认为除了他建议的普通类选择器之外没有任何理由使用任何东西。

Answer 1

在制作对话框时，请包含一个关闭按钮：

var params = {
    //whatever you already had in there
    buttons: {
        // In the buttons object, the "key" will be the button text, the function
        // will be executed on click of the button in scope of the dialoged element
        Close: function () {
            $(this).dialog('close');
        }
    }
};

$( "#demoDialog" ).dialog( params );

并且从在对话元素的任何后代元素范围内运行的代码中运行：

$(this).closest('.ui-dialog-content').dialog('close');

Answer 2

不确定我是否完全理解您的要求，但似乎最简单的方法是为您的所有对话框添加一个标准类，然后编写如下代码：

$(this).closest('.dialog-class').dialog('close');

closest() 在这里定义：

http://api.jquery.com/closest/

Answer 3

*更新以反映对话框的 ajax 部分。 *更新以反映 cmets

<div id="soemthing.random.ui.dialog.makes">
.... your content....
<a class='custom-close' href="#Close">Custom Close</a>
.... 
</div>

$(function(){
  $("your selector").dialog();
  var selector = ":ui-dialog";
//developers choice.  ".ui-dialog-content" is faster, ":ui-dialog" is guaranteed
  $(selector ).on({
   "click":function(event){
     event.preventDefault();
     $(this).closest(selector).dialog("close");
   }
  },"a.custom-close",null);

})

Answer 4

我建议使用类而不是编写内联函数调用，但这取决于您。

这是我的带有事件委托的 hackish 解决方案，其中单击具有 selfclose 类的元素将关闭祖先对话框：

$(document).on('click', '.selfclose', function() {
    $(this).parents().each(function() {
        try {
            $(this).dialog('close');
        } catch(e) {}
    });
});

Fiddle

但正如 DefyGravity 所提到的，使用 :ui-dialog 选择器是一种更简洁的解决方案：

$(document).on('click', '.selfclose', function() {
    $(this).closest(":ui-dialog").dialog("close");
});

Fiddle

Answer 5

检查这个： http://jsfiddle.net/Wqh4Y/3/

function closeParentDialog(closeButton)
{
closeButton.parents('.ui-dialog').eq(0).find('a.ui-dialog-titlebar-close').eq(0).click();

}

$(function() {


    $( "#dialog" ).dialog();

});​

你可以这样使用它：

     <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog   window can be moved, resized and closed with the 'x' icon.

          <span> <a class="close-dialog" onclick="closeParentDialog($(this))">selfclose</a>  </span>
        </p>
     </div>