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中定义它们并只显示它们。

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

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

Answer 2

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

如果您还想要更多内容，jquery overlays plugin page

上会有负载

从它的角度来看，CSS是使事情正确的关键，大多数这些例子都应该附带演示CSS供你适应。

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

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

2 个答案: