jQuery - 如何将一个DIV置于覆盖层上方?

16

我想尽可能用最少的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变暗了,但我不想让它变暗——只想让它后面的东西变暗。有什么诀窍吗?

请参见此处:http://stackoverflow.com/questions/6945289/active-a-overlay-jquery-from-a-js-funtion-instead-a-selector - user886579
2个回答

19
请查看这个快速的演示,其中的关键在于模态框是在不透明背景之上的绝对定位。该演示动态地将背景遮罩层和模态框添加到了中,但您也可以在HTML中定义它们并将其显示出来。
同意不需要使用插件来实现模态框效果,大多数插件都带有许多选项,因此可能会产生不必要的冗余代码,如果您只需要最简单的效果,则不需要这些。请注意,我们可以用两行代码而不是三行代码来完成这个任务——而且还不需要使用插件!
还有,定义CSS类并添加这些类比在脚本中为元素添加内联样式更容易。这种方式更易于维护。

1
我在这里改进了你的技术:http://forums.devnetwork.net/viewtopic.php?f=13&t=92458&p=505608#p505608 - volomike

5
我认为最好的解决方案可能是使用一个jQuery插件。快速的谷歌搜索出了这个: http://www.ericmmartin.com/simplemodal/ 它只用了三行代码就实现了你所需要的效果!
如果你想要更多,可以在jquery叠加插件页面上找到很多。
从外观上看,CSS是得到正确结果的关键,大多数示例应该都附带了演示CSS供您调整。
显然,这会引入更多外部jQuery代码,这可能是您担心的 - 但我建议使用一个编写良好且稳定的插件将节省您大量工作/时间/代码行数!

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接