我试图用尽可能少的jQuery代码进行模态对话,因为我的项目已经加载了太多的jQuery.
所以,我首先需要一个叠加,这是通过以下方式实现的:
$('body').wrapInner('') .css('opacity','0.5') .css('z-index','2') .attr('id','dim1');
现在无视我有另一个例程来杀死#dim1上的点击事件,而这个模态存在.所以,现在我需要在上面绘制我的模态对话框:
$('body').append('My Test'); $('#test') .css('opacity','1.0') .css('position','fixed') .css('color','#000') .css('z-index','2000') .css('height','300px') .css('width','300px') .css('top','50%') .css('left','50%');
然而,当我这样做的时候,我最终会变暗#test,当我不想让它变暗时 - 只是背后的东西.有什么诀窍?
在这里看到这个快速演示,关键在于模态是绝对在不透明背景的顶部.该演示动态地将背景叠加div和模态div添加到正文中,但您可以在html中定义它们并只显示它们.
同意没有必要使用插件进行模态效果,大多数插件都有很多选项,因此如果你只需要最简单的效果就不需要膨胀. - 注意我们可以用两行而不是三行来做 - 而且没有插件!
此外,定义css类并添加这些类更容易,而不是在脚本中为元素添加内联样式.更易于维护.
我认为你最好的解决方案可能是使用jquery插件.一个快速的谷歌搜索引发了这个:http://www.ericmmartin.com/simplemodal/ 这是你需要三行!
如果你想要更多,jquery叠加插件页面上有负载
从它的外观来看,CSS是使事情正确的关键,大多数这些例子都应该附带演示CSS供你适应.
显然这会带来更多您关注的外部jquery代码 - 但我建议一个编写良好且稳定的插件可以为您节省大量的工作/时间/代码行!