jQuery - 如何在叠加上放置DIV？

Question

我试图用尽可能少的jQuery代码进行模态对话,因为我的项目已经加载了太多的jQuery.

所以,我首先需要一个叠加,这是通过以下方式实现的:

$('body').wrapInner('<div />')
.css('opacity','0.5')
.css('z-index','2')
.attr('id','dim1');

现在无视我有另一个例程来杀死#dim1上的点击事件,而这个模态存在.所以,现在我需要在上面绘制我的模态对话框:

$('body').append('<div id="test">My Test</div>');
$('#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,当我不想让它变暗时 - 只是背后的东西.有什么诀窍？

Answer 1

在这里看到这个快速演示,关键在于模态是绝对在不透明背景的顶部.该演示动态地将背景叠加div和模态div添加到正文中,但您可以在html中定义它们并只显示它们.

同意没有必要使用插件进行模态效果,大多数插件都有很多选项,因此如果你只需要最简单的效果就不需要膨胀. - 注意我们可以用两行而不是三行来做 - 而且没有插件!

此外,定义css类并添加这些类更容易,而不是在脚本中为元素添加内联样式.更易于维护.

Answer 2

我认为你最好的解决方案可能是使用jquery插件.一个快速的谷歌搜索引发了这个:http://www.ericmmartin.com/simplemodal/ 这是你需要三行!

如果你想要更多,jquery叠加插件页面上有负载

从它的外观来看,CSS是使事情正确的关键,大多数这些例子都应该附带演示CSS供你适应.

显然这会带来更多您关注的外部jquery代码 - 但我建议一个编写良好且稳定的插件可以为您节省大量的工作/时间/代码行!