Question

我有一些HTML代码，里面有一个对话框，如下所示：

<center>
<a href="#add_auto" id="add_auto" onclick="addAuto();" >
    <img " src="/css/images/add_author_automated.png"; id="add_author_automated"; alt="-"; />
</a>
</center>
<div id="dialog-modal" title="Basic modal dialog" >
    <textarea style="width: 95%; heigth: 400px" name="authors-auto-adding"; id="authors-auto-adding"></textarea>
    <input text-align="center" type="BUTTON" onclick="processAuthorsParagraph();" value="Process";  />
</div>

单击图像时，我调用了函数addAuto：

function addAuto()
{
    $( "#dialog-modal" ).dialog({
        height: 300,
        width: 800,
        modal: true
    });
}

但问题是第一次打开页面时，我在主页面上有对话框内容。当我打开对话框然后关闭时，稀释内容从主页面消失。

我尝试使用

$( "#dialog:ui-dialog" ).dialog( "destroy" );

在文档中。但是没有任何变化。

谢谢你的帮助。

Answer 1

如果你将这一行添加到CSS中，它将会产生奇迹：

#dialog-modal { display: none; }

这将使您的模态默认隐藏。

Answer 2

只需将style="display: none"放入<div>

的代码中即可

显示对话框时，样式将被删除。

Answer 3

你可以将display：none直接放入dailog的包装器div元素的html标记中

    <div id="dialog-modal" title="Basic modal dialog" style="display:none;" >

Answer 4

是的，你是对的。我有同样的问题。解决方案非常简单：不要在HTML代码中打印，而是将其包装在Javascrip中......

var your_dialog_html = $('<div>your html code here, but attention: without new lines! in your editor</div>')
var your_dialog = $( your_dialog_html ).dialog({
         /* options here */
});

$('#trigger').click(function() {    
    your_dialog.dialog('open');
    return false; // prevent the default action, e.g., following a link
});

Answer 5

您正在呼叫$( "#dialog:ui-dialog" ).dialog( "destroy" );，但您的标记中没有#dialog。

为了解决您的问题，我将通过CSS将＃dialog-modal设置为display: none;。然后，您可以在对话框的$.fn.show()回调中使用display: block;或open。在对话框中出现内容之前，这不会显示内容。

Jquery对话框：对话框打开前显示的内容

5 个答案: