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（）只是寻找要关闭的对话框对象的元素层。我该怎么做？

@Update：

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

第一个问题出在这里：

<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 );

从在dialoged元素的ANY后代元素范围内运行的代码中，运行：

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

Answer 2

不确定我是否完全理解您的要求，但似乎最简单的方法是在所有对话框中添加标准类，然后使用以下代码：

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

nearest（）在这里定义：

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

Answer 3

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

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

JQueryUI如何'自我'关闭对话框

5 个答案: