1

我正在开发一个使用 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');
}

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

4

5 回答 5

2

When making your dialog, include a close button:

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

And from code running in scope of ANY descendant element of the dialoged element, run:

$(this).closest('.ui-dialog-content').dialog('close');
于 2012-10-10T00:15:27.040 回答
1

Not sure if I'm exactly understanding what you're asking, but it seems the easiest way would be to add a standard class to all your dialogs, and then have code like:

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

closest() is defined here:

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

于 2012-10-10T00:17:40.307 回答
1

*updated to reflect the ajax part of the dialog. *updated to reflect comments

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

})
于 2012-10-10T00:18:47.430 回答
0

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

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

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

小提琴

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

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

小提琴

于 2012-10-10T00:37:55.853 回答
-1

检查这个：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>
于 2012-10-10T00:30:31.847 回答