jQuery - 如何在叠加层上放置 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/383116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - How Do I Place a DIV On Overlay?
提问by redsquare
I'm trying to make a modal dialog in the least amount of jQuery code as possible because my project already has a bit too much jQuery loaded into it.
我试图用尽可能少的 jQuery 代码制作一个模态对话框，因为我的项目已经加载了太多的 jQuery。
So, I first needed an overlay, which is achieved with:
所以，我首先需要一个覆盖，这是通过以下方式实现的：
$('body').wrapInner('<div />')
.css('opacity','0.5')
.css('z-index','2')
.attr('id','dim1');
Disregard for now that I have another routine to kill the click events on #dim1 while this modal is present. So, now I need to draw my modal dialog on top:
现在请忽略我有另一个例程来终止 #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%');
However, when I do this, I end up with a dimmed out #test, when I don't want that to be dimmed -- just the stuff behind it. What's the trick?
然而，当我这样做时，我最终会得到一个暗淡的#test，当我不希望它变暗时——只是它背后的东西。有什么诀窍？
回答by redsquare
See this quick demohere, the key lies to the modal being absolute over the top of the opaque background. The demo dynamically adds the background overlay div and the modal div to the body but you could define these in the html and just show them.
在这里看到这个快速演示，关键在于模态在不透明背景的顶部是绝对的。该演示动态地将背景覆盖 div 和模式 div 添加到正文中，但您可以在 html 中定义这些并仅显示它们。
Agreed there is no need to use a plugin for a modal effect, most of the plugins come with lots of options hence the bloat which you do not want if you only need the simplest of effects. - Note we can do this in two lines rather than 3 - and without a plugin!!
同意没有必要使用插件来实现模态效果，大多数插件都有很多选项，因此如果您只需要最简单的效果，您就不会想要膨胀。- 请注意，我们可以在两行而不是 3 行中完成此操作 - 并且无需插件！！
Also it is far easier to define css classes and add these rather than add inline styles to an element in script. Easier to maintain.
此外，定义 css 类并添加这些类比向脚本中的元素添加内联样式要容易得多。更容易维护。
回答by Jennifer
I think your best solution might be to use a jquery plugin. A quick google search threw up this: http://www.ericmmartin.com/simplemodal/which is doing what you need in three lines!
我认为您最好的解决方案可能是使用 jquery 插件。一个快速的谷歌搜索抛出了这个：http: //www.ericmmartin.com/simplemodal/它在三行中做你需要的！
If you want some more, there are loads on the jquery overlays plugin page
如果你想要更多，jquery覆盖插件页面上有负载
From the look of it, the CSS is the key to getting things right, and most of these examples should come with demo CSS for you to adapt.
从外观上看，CSS 是使事情正确的关键，并且这些示例中的大多数都应该带有演示 CSS 供您调整。
Obviously this brings in more external jquery code which you are concerned about - but I would suggest a well written and stable plugin would save you lots of work/time/lines of code!
显然，这会带来更多您担心的外部 jquery 代码 - 但我建议编写良好且稳定的插件可以为您节省大量工作/时间/代码行！
