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

时间:2014-09-08 18:28:33

标签: javascript jquery html css

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

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

似乎让这一消失的一种方法是将visibility: hidden;添加到我分配给我的模态div的类的CSS中,这会停止在页面加载时出现的元素形式,但它也是然后将模态控件内的元素变为不可见,我必须将以下行添加到打开它的函数中...

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

同样,所有这一切似乎都有效,但我想知道是否有人知道更好的方法来有效地隐藏所有的输入和下拉,并且文本内部将成为页面加载的模态控制而不是通过玩对话框打开时的CSS。

1 个答案:

答案 0 :(得分:0)

将一个名为隐藏的类添加到您的css文件中。

.hidden{
   display: none;
}

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