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

快速查看 demo在这里，关键在于模态绝对位于不透明背景的顶部。该演示动态地将背景覆盖 div 和模态 div 添加到正文，但您可以在 html 中定义它们并仅显示它们。

同意，不需要使用插件来实现模态效果，大多数插件都带有很多选项，因此如果您只需要最简单的效果，那么您不希望出现膨胀。 - 请注意，我们可以用两行而不是 3 行来完成此操作 - 并且无需插件!!

此外，定义 css 类并添加它们比向脚本中的元素添加内联样式要容易得多。更容易维护。