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，而我不希望它变暗——只是它背后的东西。有什么诀窍？

4

2 回答 2

19

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

同意不需要使用插件来获得模态效果，大多数插件都有很多选项，因此如果您只需要最简单的效果，您不想要的膨胀。- 请注意，我们可以在两行而不是 3 行中执行此操作 - 并且无需插件！

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

于 2008-12-20T09:53:46.283 回答
5

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

如果你想要更多， jquery 覆盖插件页面上有负载

从外观上看，CSS 是正确处理事情的关键，并且这些示例中的大多数都应该带有演示 CSS 以供您适应。

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

于 2008-12-20T09:41:03.643 回答