可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

JQuery Dialog is giving me lots of pain lately. I have the following div which I want to be popped up. (Ignore that the classes do not show the double quotes in the syntax)

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>

The JQuery for this is ...

$(document).ready(function() {

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

});

And the dialog is 'open'ed by

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

}

The problem starts in the initialization itself. When the document loads, the <div #confirmation> is deleted from the markup! I had a similar issue earlier, but I cannot use that solution here. On this page I can have multiple PopUp divs.

When I added the initialization in just before opening it; the form popped up. But after I close it, the div is removed; so I am not able to see the popup again.

回答1:

The reason you're seeing it remove #confirmation is because $("#foo").dialog() will move #foo from wherever it is in the DOM to the bottom of the document inside wrapper elements that create the dialog styling which are initially hidden. It's understood that dialogs are hidden until opened.

回答2:

Okay. I think I have nailed it with the help from you guys.

Some "self-defined" facts about dialog that I know now (Please correct if I am wrong):

When a <div> is initialized as a dialog, it is removed from its original location and moved to the <body> element in a <div class="ui-dialog">. So it 'naturally' disappears.
To select the dialog, you now need a unique identifier. It can be the id in most cases, or some other attributes on that div which makes it unique on the page.

The dialog markup is created every time the dialog is initialized. So, in case of AJAX calls if an already existing dialog is initiated, you will get the popup more than once (as many times it was reinitialized). To solve this, I deleted the existing dialog markups before reintializing. I had to do this because my AJAX response may have some dialogs that need to be initiated.

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


});

}

回答3:

in my case a simple 'return false;' in the click function did the trick:

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

回答4:

Are you sure that one and only one div has id "confirmation"? Duplicate ids aren't allowed.

回答5:

The approved answer worked for me too. I was using:

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

and it wasn't there after clicking the first time.

Now I am using the ID direcly:

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

and obviously, no matter where dialog moves it on the page, this will find it.

Jquery Dialog - div disappears after initializatio

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

收藏的人(0)

Jquery Dialog - div disappears after initializatio

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮