jQuery的对话框：该对话框之前显示的内容是开放的

问题描述：

我有一些HTML代码的对话里面，像这样：jQuery的对话框：该对话框之前显示的内容是开放的

<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>

当点击图像，我callig功能addAuto：

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

但问题是，第一次打开页面时，我在主页面上显示了对话框内容。当我打开对话框然后关闭时，主页上的dilog内容消失。

我已经尝试在的document.ready使用

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

，但没有任何变化。

谢谢你的帮助。

答

只要把style="display: none"中的<div>

标签当所示的对话框样式将被删除。直接进入无包装的div元素的HTML标记dailog

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

非常感谢你Alnitak，这对我有效。 – 2012-07-06 13:28:11

答

是的，你是对的。我有同样的问题。该解决方案是非常简单：不要打印你的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 
});

工作，但它不是很好的内容与逻辑的分离 – Alnitak 2012-07-06 13:26:24

我不认为这是一个好主意在这种情况下。 CSS在那里服务。将HTML放入Javascript代码是一件非常糟糕的事情，如果它是HTML很长的话，那就更是如此。 – kapa 2012-07-06 13:27:29

@Alnitak：嗨，对不起Alnitak - 是的，你说得对，你的解决方案更加优雅，谢谢你我也从中学到了东西 - 但是我发现你的评论是“一段不相关的代码”，“它没有帮助”不必要的冒犯性和不正确的，因为我的代码是相关的，实际上工作... – Chris 2012-07-06 13:48:08

答

如果添加此行到您的CSS就会创造奇迹：

#dialog-modal { display: none; }

这会让你的模态默认隐藏。

非常感谢... – 2012-07-06 13:27:48

答

你可以把显示器。

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

感谢里卡多.... – 2012-07-06 13:29:45

答

要调用$("#dialog:ui-dialog").dialog("destroy");，但在你的标记没有#dialog：

jQuery UI将在第一次打开时自动“显示”对话框。 – Alnitak 2012-07-06 13:30:09

jQuery的对话框：该对话框之前显示的内容是开放的

相关推荐