jQuery-如何在叠加层上放置DIV? [英] jQuery - How Do I Place a DIV On Overlay?

问题描述

我正在尝试使用最少的jQuery代码创建一个模式对话框，因为我的项目中已经加载了太多的jQuery.

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.

因此，我首先需要一个覆盖层，该覆盖层可以通过以下方式实现:

So, I first needed an overlay, which is achieved with:

$('body').wrapInner('<div />')
.css('opacity','0.5')
.css('z-index','2')
.attr('id','dim1');

现在，不管存在此模式时，我还有另一个例程可以终止#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:

$('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，当我不想让它变暗时–仅是它背后的东西.诀窍是什么?

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?

推荐答案

在此快速查看演示，关键在于模态在不透明背景的顶部上是绝对的.该演示动态地将背景叠加层div和模式div添加到主体，但是您可以在html中定义它们并仅显示它们.

See this quick demo here, 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.

同意不需要使用插件来产生模态效果，大多数插件都带有很多选项，因此如果您只需要最简单的效果就不需要膨胀. -请注意，我们可以分两行而不是3行-并且没有插件！

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!!

而且，定义css类并添加这些类要比在脚本中的元素中添加内联样式要容易得多.易于维护.

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.

这篇关于jQuery-如何在叠加层上放置DIV?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！