Javascript 在页面加载时隐藏模态元素的更好方法

想象一下，一个相当标准的web应用程序页面使用jQuery和Knockout，它主要使用模态对话框来编辑数据。模态对话框是通过jqueryui创建的，一切都正常。当页面加载时，JS运行，当点击按钮时对话框打开，完成他们的工作，一切都很好，很好，很好

但是，在加载页面时，

div

s中包含模态控件HTML的元素将在脚本将它们转换为对话框之前闪烁一秒钟，之后它们将再次隐藏，直到对话框打开。是的，即使脚本已包装在

$（document）.ready（）

调用中，也会发生这种情况，因为所做的只是在加载DOM之前防止操作

一种似乎可以消除这种情况的方法是添加

可见性：隐藏

到我分配给modal

div

s的类的CSS，它阻止元素在页面加载时出现，但它也会使modal控件内的元素不可见，我必须向打开它的函数添加以下行

$modal.css('visibility', 'visible');

---

同样，所有这些似乎都是可行的，但我想知道是否有人知道一种更好的方法可以有效地隐藏所有输入和下拉列表，以及页面加载时将成为模式控件的文本，而不是在对话框打开时使用CSS。

在CSS文件中添加一个名为hidden的类

.hidden{
   display: none;
}

---

这将允许您在其他元素上重用此类。如果您使用的是twitter引导，那么这个类应该是可用的：

因为对话框显示可能会改变可见性（即显示css），简单地使用

#modal{display:none}是一个有用的主意

在您的css中-如果只使用css并为所有需要隐藏的对话框设置

display:none

，我不想使用

display:none

，因为页面底部可能会有额外的空间。但是现在我测试页面加载时，它似乎没有显示出来，所以我想我只是没有像使用jQuery UI测试时那样彻底。我已经为所有的模态控件创建了一个类来帮助设置所有元素的样式和边距，所以我只是在那里添加了它。