logo标签列表

关闭后如何再次显示jQueryUI对话框

jqueryjquery-uijquery-ui-dialog
3

我在页面上有几个链接，我想为每个链接显示单独的jQuery对话框。这是标记：

<html>
    <body>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                 <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                  <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
    </body>
</html>

以下是JavaScript代码：

$(document).ready(function() {
    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        var d = $(this).closest('DIV.container').find('DIV.dialog_box').dialog({
            autoOpen: false,
            title: 'You are going to delete a div!',
            buttons: {
                "Do delete": function() {
                    alert('You have entered:' + $(this).find('textarea').val());
                    $(this).dialog("close");
                    $(this).closest('DIV.container').hide(); //hiding div (primary action)     
                }
            },
            width: 800
        });
        d.dialog("open");
    });
});

如您所见，触发事件的链接具有delete_link类，应该是jQuery UI对话框的DIV具有dialog_box类。
问题在于：当对话框打开并且用户按下“关闭”后，无法再次打开对话框。
根据谷歌和SO搜索，我不是第一个遇到这个问题的人。例如，这篇文章：http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/。看来，对话框应该在click()动作之前进行某种初始化，但在所有解决方案中，页面上只有一个带有分配ID的对话框——我无法将其应用于我的情况。
我尝试过这个，但它不起作用：
$(document).ready(function() {
    //initializing
    $('DIV.dialog_box').dialog({
        autoOpen: false,
        title: 'You are going to delete a div!',
        buttons: {
            "Do delete": function() {
                alert('You have entered:' + $(this).find('textarea').val());
                $(this).dialog("close");
                $(this).closest('DIV.container').hide(); //hiding div (primary action)     
            }
        },
        width: 800
    });

    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        $(this).closest('DIV.container').find('DIV.dialog_box').dialog("open");
    });
});

我已经在jsFiddle上准备了演示：http://jsfiddle.net/NQmhk/。没有使用jQUery UI css，但我希望这足以理解问题。非常感谢您的任何帮助。
8个回答
5

实际上我也遇到了类似的问题，通过这里的一些提示，我解决了它。

基本上，我正在创建一个带有“show-popup-link”类的链接，当单击时将以下元素作为弹出窗口打开。

<a href="#" class="show-popup-link">Click for popup</a>
<div class="hidden-element">Some content for the popup</div>

页面加载后，我会执行这个JavaScript方法：
function SetupShowPopupLink() {
   $("a.show-popup-link").click(function () {
      var $link = $(this);
      var dialogClone = $link.next().clone();
      $link.next().dialog({ 
         title: "title", 
         close: function () { $link.after(dialogClone); }
       });
   });
}

基本上，在对话框函数将显示为弹出窗口的元素移动到页面末尾之前，我会克隆该元素，然后在链接后插入它（在开始时它是隐藏的，并且再次插入时也会被隐藏）。
我唯一担心的是，可能存在某些有关显示为弹出窗口的元素的内存泄漏问题，但也可能不会，因为这应该由jquery-ui处理。
希望这对你有效。
4
尝试在对话框按钮功能中调用dialog（“destroy”）。
实际上，这很有帮助，谢谢。现在我每次都可以创建和销毁对话框了。谢谢。 - Silver Light
3
我不确定，但我认为dialog('destroy')不能恢复你在HTML文档中<div>的位置。如果我没弄错的话，它只会清理<div>样式属性以将其恢复到之前的状态，但它不会将<div>的位置恢复到原来的位置。 - eagerMoose
我尝试了“destroy”命令，但一旦销毁后，它会破坏页面布局并且不再出现。看起来每次都需要重新创建对话框。 - alsaleem
1
无论如何，您仍应调用对话框上的“destroy”。这将防止每次调用对话框时创建多个DIV的内存泄漏。在对话框的“close”函数中，只需放置$("#dialog").dialog("destroy");以进行适当的清理。
1

发生的情况是jQuery将您的对话框div从容器div中取出，并将其放置在html body的最底部，关闭后不会将其放回。我认为这实际上是使用jQuery对话框的最佳实践，否则您必须编写一些清理代码才能将对话框div放回容器div。

如果没有绝对必要，我会避免使用多个对话框div，因为您可能不需要同时打开多个对话框。

1

一种选择是在每个对话框上放置一个ID，例如：

<div id="dialog_box_1" class="dialog_box">
  ...
</div>

然后有以下链接，它会打开对话框（将 #1 更改为打开相应的对话框）：

<a href="#1" class="dialog_open">Open</a>

现在，您可以将连接对话框的代码移出单击事件并尝试类似以下的内容：

<script type="text/javascript">
    $(function() {
        $('.dialog_box').modal();

        $('.dialog_open').click(function(e) {
             e.preventDefault();
             var id = $(this).attr('href').replace('#', '');
             $('#dialog_box_' + id).dialog('open');
        });
    });
</script>

请注意，我从未使用过jQuery UI对话框。
希望这有所帮助。
0

更改

$(this).dialog("close");

使用

$(this).dialog("destroy");
0

是的，destroy 'll 对我有用：

$('.ui-dialog-titlebar-close').click(function(){

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

});
0

我正在使用C＃，MVC Partials和嵌套的jQuery对话框。

我正在从已经显示的对话框（MVC Partial）中显示[第二个]对话框（MVC Partial）。 对话框将再次显示两次，但由于旧对话框容器未被销毁，导致居中/顶部的计算偏移。

这将删除对话框，保留已经显示的对话框，并清除以前输入的数据后再次显示对话框。

buttons: {
                        "Close": function () {
                            $("#MyDivPlaceholder").dialog("close");
                            $("#MyDivPlaceholder").empty();
                            $("div[aria-describedby='MyDivPlaceholder']").remove();
                        }
                    }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接