JQuery对话框会在页面加载时立即显示

问题描述

我创建了一个使用标准JQuery UI功能的基于JQuery的对话框的页面。我这样做与JQuery的开箱即用功能...根本没什么特别的。这是我的HTML对话框：

I created a page that has a JQuery based dialog using the standard JQuery UI function. I do this with out of the box functionality of JQuery... nothing special at all. Here is my HTML for the dialog:

<div id = "myDialog">
    <!-- ... more html in here for the dialog -->
</div>

然后，JavaScript中的JQuery调用< div>一个对话框：

Then the JQuery called in javascript that transforms the <div> to a dialog:

    // pruned .js as an example of kicking up a JQuery dialog
    $('#myDialog').dialog({
        autoOpen: false,
        title: 'Title here',
        modal: true
        }
    });

再次，plain-vanilla JQuery。因此，您可以通过单击父页面上的链接来启动此向导，然后生成一个JQuery对话框，该对话框具有包含图像等的大量HTML。

Again, plain-vanilla JQuery. So you start this wizard by clicking on a link on the parent page, and it then spawns a JQuery dialog which has a significant chunk of HTML that includes images, etc.

当我继续开发此页面时，我开始注意到，当我在浏览器中加载了< div>我正在把JQuery转换成对话框的标签将很简单地显示出来。然后页面将按预期方式运行。换句话说，对话框不会被隐藏，它将在页面中短暂地显示。非常丑陋和不专业的看！ 但分秒后，页面将正确呈现，并且正如我预期/想要的那样。

As I continued developing this page, I started to notice that when I loaded the page in the browser that the <div> tags I was putting in that JQuery transforms into dialogs would very briefly be displayed. Then the page would act as expected. In other words, the dialog would not be hidden, it would be displayed briefly in-line in the page. Quite ugly and unprofessional looking! But after a split second, the page would render correctly and look just as I expected/wanted.

随着时间的流逝，随着页面大小的增长，页面保持不正确的时间增长。我的猜测是，浏览器的渲染引擎正在加载页面，然后在最后它会启动JQuery，将转换< div>进入对话框。然后，这个JQuery函数将转换简单的< div>到一个JQuery对话框并隐藏它（因为我的autoOpen属性设置为false）。某些浏览器< cough> IE< / cough>显示比别人更长。现在我的大对话框导致页面错误地渲染大约1秒钟... YUCK！

Over time, as the page size grew, the time the page would remain incorrectly rendered grew. My guess is that the rendering engine of the browser is rendering the page as it is loading, then at the end it is kicking off the JQuery that will transform the <div> into a dialog. This JQuery function will then transform the simple <div> to a JQuery dialog and hide it (since I have the autoOpen property set to false). Some browsers <cough>IE</cough> display it longer than others. My large-ish dialog now causes the page to incorrectly render for about 1 second... YUCK!

推荐答案

你可以添加一些CSS，所以默认是隐藏的，不需要加载代码：

You can add some CSS so it's by default hidden, no onload code needed:

#myDialog { display: none; }

有了这个，没有其他代码是必要的，当你打开对话框，它会扭转这种风格...所以没有额外的运行在 document.ready 。或者，如果您有很多对话框，请给它一个类，如下所示：

With this, no other code is necessary, when you open the dialog it'll reverse this style...so nothing additional to run on document.ready. Alternatively, if you have lots of dialogs, give it a class, like this:

<div id="myDialog" class="dialog"></div>

使用此CSS：

.dialog { display: none; }

在几乎所有情况下，jQuery使用显示 style属性来隐藏东西，所以使用它来最初隐藏的东西将会与你想要使用的元素一起工作，无论是一个对话框，一个简单的 .fadeIn（）等。

In almost all cases, jQuery uses the display style attribute to hide things, so using this to initially hide something will work with whatever you want to use the element for later, whether it's a dialog, a simple .fadeIn(), etc.

这篇关于JQuery对话框会在页面加载时立即显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！