Question

JQuery Dialog最近给了我很多痛苦。我有以下div想要弹出。（忽略类没有在语法中显示双引号）

TABLE class=widget-title-table border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
    <TD class=widget-title><SPAN class=widget-title>Basic Info</SPAN></TD>
    <TD class=widget-action>
    <DIV id=edit-actions jQuery1266325647362="3">
        <UL class="linkbutton-menu read-mode">
            <LI class="control-actions">
                <A id="action-button" class="mouse-over-pointer linkbutton">Delete this                 stakeholder</A> 
            <DIV id="confirmation" class="confirmation-dialog title=Confirmation">
                Are you sure you want to delete this stakeholder? 
            </DIV>

</LI></UL></DIV></TD></TR></TBODY></TABLE>

JQuery就是......

$(document).ready(function() {

$('#confirmation').dialog({
    bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
    draggable: true, position: 'center', resizable: false, width: 400, height: 150
    });

});

对话框由

'打开'

var confirmationBox = $('#confirmation',actionContent);
if (confirmationBox.length > 0) {


    //Confirmation Needed
    $(confirmationBox).dialog('option', 'buttons', {
        'No': function() {
            $(this).dialog('close');
        },
        'Yes': function() {
            $('ul.read-mode').hide();
            $.post(requestUrl, {}, ActionCallback(context[0], renderFormUrl), 'json');
            $(this).dialog('close');
        }            
    });

    $(confirmationBox).dialog('open');

}

问题始于初始化本身。加载文档时，将从标记中删除<div #confirmation>！我之前有类似的问题，但我不能在这里使用这个解决方案。在这个页面上，我可以拥有多个PopUp div。

当我在打开之前添加初始化时;表格弹出。但在我关闭它之后，div被删除了;所以我再也看不到弹出窗口了。

Answer 1

你看到它删除#confirmation的原因是因为$("#foo").dialog()会将#foo从DOM中的任何地方移动到文档底部，这些包装元素会创建最初隐藏的对话框样式。据了解，对话框在打开之前一直处于隐藏状态。

Answer 2

好。我想我已经在你们的帮助下钉了它。

我现在知道的一些关于对话的“自定义”事实（如果我错了，请纠正）：

将<div>初始化为对话框时，会将其从原始位置移除，并移至<body>中的<div class="ui-dialog">元素。所以'自然'消失了。
要选择对话框，您现在需要一个唯一标识符。在大多数情况下，它可以是 id ，或者该div上的其他一些属性，使其在页面上唯一。

每次初始化对话框时都会创建对话框标记。因此，在AJAX调用的情况下，如果启动了一个已经存在的对话框，您将不止一次获得弹出窗口（多次重新初始化）。为了解决这个问题，我在重新初始化之前删除了现有的对话框标记。我不得不这样做，因为我的AJAX响应可能有一些需要启动的对话框。

function InitializeConfirmationDialog() {
    $('div.confirmation-dialog').each(function() {
    var id = $(this).attr("id");
    if ($('div.ui-dialog-content[id="' + id + '"]').length > 0) {
        $('div.ui-dialog-content[id="' + id + '"]').parents('div.ui-dialog:first').html("").remove();                
    }
    $(this).dialog({
        bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
        draggable: true, position: 'center', resizable: false, width: 400, height: 150
    });


});

}

Answer 3

在我的情况下，一个简单的'return false;'在click函数中做了诀窍：

  $("#buttonIdThatOpensTheDialogWhenClicked")
         .button()
         .click(function () {
                $("#myDialog").dialog("open");
                return false;
         });
  });

Answer 4

你确定只有一个div有id“确认”吗？不允许重复ID。

Answer 5

批准的答案对我也有用。我正在使用：

$('.myLink').click(function(){
    $(this).next().dialog(...)
});

并且在第一次点击后它不存在。

现在我正在使用ID：

$("#myId").dialog(...)

显然，无论对话框在页面上移动它，都会找到它。

Jquery Dialog - div在初始化后消失

5 个答案: