JQuery UI对话框在显示之前显示“Dialog Div”
问题描述:
我有一个JQuery UI对话框,当用户访问我的网站时会自动打开,因此我们可以以模态方式显示“Under Construction”对话框。下面是对话的代码:JQuery UI对话框在显示之前显示“Dialog Div”
var $dialog = $('#dialog');
if ($.cookie("MySitePreviewCookie") != "firstView")
$(function() {
$.cookie("MySitePreviewCookie", "firstView", { expires: 180, path: '/' });
// Show Dialog Div
$dialog.dialog({
autoOpen: true,
resizable: false,
modal: true,
width: 600,
buttons: {
"Skip This": function() {
$(this).dialog("close");
}
}
});
});
else
$(function() {
// HIDE Dialog Div
$dialog.dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 600,
buttons: {
"Skip This": function() {
$(this).dialog("close");
}
}
});
});
这里是对话框标记:
<div id="dialog" title="Welcome to MySite" class="dialogStyles">
<p>
Our site is still under construction but please look around and get a feel for what
we plan to offer. If you would like to sign-up for our newsletter, please enter
your email address below and click the <strong>Sign-up for Newsletter</strong> button.
</p>
<p class="validateTips"></p>
<br />
<input type="text" id="ccEmailAddress" name="ccEmailAddress" class="required email"
style="width: 250px" />
<input id="btnAddNewsletter" class="submit" type="submit" value="Sign- up for Newsletter" />
</div>
对话框的伟大工程。我有CSS来设计它,它看起来很棒,除了事实上,当页面第一次加载的时候,有一堆图片显示它正在加载的页面(主页)。它显示(位于页面的最底部),然后对话框显示出来,一切正常。我怎样才能让它停止在页面上显示DIV而不影响对话框?
答
这个问题并没有真正的直接答案,所以为了让它更容易,并希望那些正在浏览与此类似的答案的人,这将适合您的情况。 Zod是正确的...使用<style type="text/css"> .dialog {display:none}</style>
将防止对话框中的任何输入或文本提前显示在页面上。此外,使用“文档准备”应该有助于防止文档显示任何内容,直到需要加载的所有内容都准备就绪。
出于好奇,为什么你创建一个对话框,如果你不打算显示它(我假设你只想显示它在网站的第一个视图)?你甚至需要那个'else'语句吗? – 2010-11-19 18:44:33
您是否使用过'style =“display:none”' – zod 2010-11-19 18:41:59
这个div是什么? – 2010-11-19 18:44:13