5

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 被删除了；所以我无法再次看到弹出窗口。

4

5 回答 5

5

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

于 2010-02-16T13:34:18.377 回答
3

好的。我想我已经在你们的帮助下搞定了。

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

  1. 当 a<div>被初始化为一个对话框时，它会从原来的位置移除并移动到 a 中的<body>元素<div class="ui-dialog">。所以它“自然地”消失了。

  2. 要选择对话框，您现在需要一个唯一标识符。在大多数情况下，它可以是id ，也可以是该 div 上的一些其他属性，使其在页面上独一无二。

  3. 每次初始化对话框时都会创建对话框标记。因此，在 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
    });


});

    }

于 2010-02-16T13:51:16.480 回答
3

在我的情况下，一个简单的'return false;' 在点击功能中做到了：

  $("#buttonIdThatOpensTheDialogWhenClicked")
         .button()
         .click(function () {
                $("#myDialog").dialog("open");
                return false;
         });
  });
于 2013-09-20T23:56:06.507 回答
0

你确定只有一个 div 有 id "confirmation" 吗？不允许使用重复的 ID。

于 2010-02-16T12:59:26.437 回答
0

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

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

第一次点击后它就不存在了。

现在我直接使用 ID：

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

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

于 2012-07-12T18:18:01.853 回答