Question

单击以打开对话框时，它会显示旧内容和新内容。如果我添加$(this).dialog("destroy");，则根本无法打开对话框。请让我知道如何不显示旧内容。

<script>
//display dialog box
$("#dialog-message").dialog({
    autoOpen: false,
    modal: false,
    draggable: true,
    resizable: true,
    show: 'blind',
    hide: 'blind',
    width: 900,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    }
});

//click to open dialog box
$("#test").click(function() {
    $( "#dialog-message" ).dialog( "open" );
}
</script>

<p id="test">test</p>
<div id="dialog-message" title="Important information">
<form>  </form>
</div>

Answer 1

这是因为您错过了代码中的结束括号);。正确的片段是：

//click to open dialog box
$("#test").click(function() {
    $( "#dialog-message" ).dialog( "open" );
});

我做了一个JSFiddle来证明它有效。

JSFiddle

Answer 2

只需添加内容持有者，然后在捕获的点击事件中更改该内容，如下所示：

＆＃13;

//display dialog box
$("#dialog-message").dialog({
    autoOpen: false,
    modal: false,
    draggable: true,
    resizable: true,
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    }
});

//click to open dialog box
$("#old-content").click(function() {
    $('#dialog-message .content').text('This is the old content');
    $('#dialog-message').dialog('open');
});

$("#new-content").click(function() {
    $('#dialog-message .content').text("Some new content");
    $('#dialog-message').dialog('open');
});

＆＃13;

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<button id="old-content">Old content</button>
<button id="new-content">New content</button>
<div id="dialog-message" title="Important information">
  <div class="content"></div>
</div>

＆＃13;

将打开jquery对话框，其中包含新旧内容

2 个答案: