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

您可以添加一些CSS,使其在默认情况下隐藏,无需加载代码:

#myDialog { display: none; }

document.ready . 或者,如果你有很多对话框,给它一个类,像这样:

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

.dialog { display: none; }

在几乎所有情况下,jQuery都使用 display style属性来隐藏东西,所以使用它来最初隐藏东西将与您以后想要使用的元素一起工作,无论它是一个对话框,还是一个简单的 .fadeIn() 等等。

我想出了一个解决这个问题的办法,效果还可以,但是 我想知道是否有人知道更好的方法。

<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没有显示在一行。此修复的用户体验是可以接受的,但并不理想。

我所有的对话都是 <div> 元素,并且id总是以“dialog”结束。然后我使用这个CSS:

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

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

如果CSS3不是一个选项,您可以使用CSS2来获得相同的结果,但是您必须更加小心,不要在任何情况下使用dialog名字对象 <部门> 不打算隐藏的id:

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

并将对话框id设置为“我的示例对话框”

如果您使用的是“弹出窗口”而不是“对话框”,我必须执行以下操作:

HTML格式

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

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