Question

我使用标准的JQuery UI函数创建了一个具有基于JQuery的对话框的页面。我用JQuery的开箱即用功能来做这件事......没什么特别的。这是我对话框的HTML：

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

然后JQuery调用javascript转换＆lt; div＆gt;到对话框：

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

再次，普通的香草JQuery。因此，您可以通过单击父页面上的链接来启动此向导，然后生成一个JQuery对话框，其中包含大量HTML，其中包含图像等。

当我继续开发此页面时，我开始注意到当我在浏览器中加载＆lt; div＆gt;时我简单地展示了JQuery转换为对话框的标签。然后页面将按预期运行。换句话说，对话框不会被隐藏，它会在页面中简单地在线显示。看起来很丑陋和不专业！ 但是在一瞬间之后，页面会正确呈现并且看起来就像我预期的那样。

随着时间的推移，随着页面大小的增长，页面保持错误呈现的时间也会增长。我的猜测是浏览器的渲染引擎在加载时渲染页面，然后最终开始转换将转换＆lt; div＆gt;的JQuery。进入一个对话框。然后，这个JQuery函数将转换简单的＆lt; div＆gt;到JQuery对话框并隐藏它（因为我将autoOpen属性设置为false）。一些浏览器＆lt; cough＆gt; IE＆lt; / cough＆gt;显示它比其他人更长。我的大型对话框现在导致页面错误渲染大约1秒钟... YUCK！

Answer 1

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

#myDialog { display: none; }

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

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

使用这个CSS：

.dialog { display: none; }

在几乎所有情况下，jQuery都使用display样式属性来隐藏内容，因此使用它来初始隐藏某些内容将适用于您希望以后使用该元素的任何内容，无论它是一个对话框，一个简单的{ {1}}等等。

Answer 2

我想出了解决这个问题的方法，但是我想知道是否有人知道更好的方法。

问题是浏览器在加载DOM时呈现DOM，然后在隐藏它的末尾触发JQuery .js。所以我正在做的是在父母＆lt; div＆gt;中关闭可见性标记所以默认情况下隐藏所有对话框内容，然后转动该父级＆lt; div＆gt;标记.js。

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog">
        <!-- ... more html in here for the dialog -->
    </div>
</div>

然后是JQuery .js：

<script type="text/javascript">

$(document).ready(function() {
    //turn the visibility on last thing
    $("#bodyDiv").attr("style", "visibility:visible");
});
</script>

正如您所看到的，我只是默认关闭所有内容的可见性，以便页面呈现而不显示对话框内容，然后再次打开可见性。这不是一个完美的解决方案，因为它仍然可以让页面在一秒钟内变得有趣，但至少对话框HTML不会在线显示。使用此修复程序的用户体验是可以接受的，但并不理想。

Answer 3

我使用带有一点命名的CSS3选择器＆amp;标签约定。我的所有对话框都是<div>个元素，ID始终以＆＃34; dialog＆＃34;结尾。然后我使用这个CSS：

div[id$=dialog] { display: none; }

示例对话框：

<div id="my-sample-dialog" title="Sample Dialog">
      <span>I'm invisible!</span>
</div>

如果CSS3不是一个选项，你可以使用CSS2来获得相同的结果，但是你必须更加小心，不要在任何<div> id中使用对话框名字对象而不是要隐藏：

div[id~=dialog] { display: none; }

并将对话框ID设置为＆＃34;我的示例对话框＆＃34;

Answer 4

如果你正在使用＆＃34; popup＆＃34;而不是一个＆＃34;对话框＆＃34;我必须做以下事情：

HTML

<div data-role="popup" class="popup">
  <!-- CONTENT -->
</div>

CSS

.popup { display:none; }
.ui-popup-container .popup { display:block; }

我最初使用display：none隐藏弹出窗口，并且在jQueryUI将弹出窗口包装在容器中之后，其他样式优先。

JQuery对话框在页面加载时全面显示

4 个答案: