当前位置:  开发笔记 > 前端 > 正文

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

如何解决《jQuery-如何在叠加上放置DIV?》经验,为你挑选了2个好方法。

我试图用尽可能少的jQuery代码进行模态对话,因为我的项目已经加载了太多的jQuery.

所以,我首先需要一个叠加,这是通过以下方式实现的:

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

现在无视我有另一个例程来杀死#dim1上的点击事件,而这个模态存在.所以,现在我需要在上面绘制我的模态对话框:

$('body').append('
My Test
'); $('#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,当我不想让它变暗时 - 只是背后的东西.有什么诀窍?



1> redsquare..:

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

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

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


嗯改进....我的快速演示不是一个完整的功能!

2> Jennifer..:

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

如果你想要更多,jquery叠加插件页面上有负载

从它的外观来看,CSS是使事情正确的关键,大多数这些例子都应该附带演示CSS供你适应.

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

推荐阅读
小白也坚强_177
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有