在页面加载时隐藏模式元素的更好方法[重复]答案

【问题标题】：better way to hide modal elements on page load [duplicate]在页面加载时隐藏模式元素的更好方法[重复]
【发布时间】：2014-09-08 18:28:32
【问题描述】：

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

但是，当页面加载时，divs 中包含用于模态控件的 HTML 的元素将在将它们转换为对话框的脚本完成之前闪烁一秒钟，之后它们再次被隐藏直到对话框打开。是的，即使脚本被包装在 $(document).ready() 调用中也会发生这种情况，因为所做的只是在加载 DOM 之前阻止操作。

似乎使这种情况消失的一种方法是将visibility: hidden;添加到我分配给我的模态divs的类的CSS中，这会阻止元素表单出现在页面加载时，但它也会转动这些元素在模态控件内部不可见，我必须将以下行添加到打开它的函数中......

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

再一次，这一切似乎都有效，但我想知道是否有人知道一种更好的方法来有效地隐藏所有输入和下拉菜单，以及在页面加载时将成为模态控件的文本，而不是使用 CSS当对话框打开时。

【问题讨论】：

由于对话框显示可能会改变可见性（即显示 css），因此在您的 css 中简单地添加 #modal {display:none} 是一个有用的想法 - 她更多 stackoverflow.com/questions/2513051/…
只使用 CSS 并为所有需要隐藏的对话框设置 display: none 怎么样？

【解决方案1】：

在您的 css 文件中添加一个名为 hidden 的类。

.hidden{
   display: none;
}

这将允许您在其他元素上重用此类。如果你使用 twitter bootstrap 这个类应该可用：http://getbootstrap.com/css/#helper-classes-show-hide

【讨论】：

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