1

我有一些 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
    });
}

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

我已经尝试使用

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

在 document.ready 但没有任何变化。

感谢您的帮助。

4

5 回答 5

3

如果您将此行添加到您的 CSS 中，它将产生奇迹：

#dialog-modal { display: none; }

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

于 2012-07-06T13:24:30.703 回答
3

只需style="display: none"输入标签<div>

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

于 2012-07-06T13:24:34.010 回答
2

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

    <div id="dialog-modal" title="Basic modal dialog" style="display:none;" >
于 2012-07-06T13:28:02.690 回答
1

是的你是对的。我有同样的问题。解决方案非常简单：不要在 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
});
于 2012-07-06T13:24:23.987 回答
1

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

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

于 2012-07-06T13:29:01.580 回答