2016 - 2024

感恩一路有你

bootstrap对话框怎么设置 jquery layer怎么弹出指定的html内元素?

浏览量:4512 时间:2023-05-04 14:10:21 作者:采采

jquery layer怎么弹出指定的html内元素?

一个基本都的自动弹出层估计满足以上需求:

1、再点击按钮/链接触发时弹出对话框层,提示框层应该是有半透明的遮罩层;

2、直接点击弹出对话框层的直接关闭按钮、取消按钮或则遮罩层会关掉刻意隐藏弹出层;

3、可以使用Esc键也可以不关了自动弹出层;

4、它是响应式的,并且兼容在现代主流浏览器。

HTML

1、首先我们在页面不宜放置一个用处能触发弹出对话框层的链接,也这个可以是个按钮button,注意一点的是我们给它可以设置一个data-show-layer属性,这个属性值对应的那是弹出层的id,也就是说是从data-show-layer来关联弹出层。

2、很看来,上面的链接关联的提示框层的id是hw-layer。那好,选择我们来准备着弹出来层hw-layer的html代码。

3、我们提示框层的最外层,也就是蒙版层.hw-overlay,我们会可以使用CSS操纵它是一个半透明的层,为了相连提示框层和页面主体内容。r然后把在.hw-layer-wrap主体层内,我们可以系统设置弹出层的内容,当然内容由你来定,我们本文生克制化实例弹出来层的内容是另一个去确认对话框,类似window的confirm()。内容使用了bootstrap的col-*栅格布局,还在用glyphicon字体图标。不过最最关键的那就是需要图层效果层和主体层,内容可以依据什么项目需求自定义,只不过它很有可能是个表单、也很有可能是个纯文字说明的内容。

CSS

1、CSS也重要的部分,我们先系统设置遮罩层,它设置成情况下应该是不可见的,位置上defined固定设置的,另外是完全覆盖整个页面的,它应该透明的的,我们这里设置里了背景黑色、透明度0.3,如background-color:rgba(0,0,0,0.3)。后再主体层.hw-layer-wrap,我们可以设置它的宽度,换算它的位置。宽度我们可以预设一个值,水平距离而内容多少不确定,这里我们用不着设置一个具体看的值,在后面的js部分会对高度全面处理,后再设置中左面和边框阴影等效果。或是水平和互相垂直横列的设置也可以可查阅Helloweba文章:要如何让DIV水平和垂直横列。自动弹出层里面的内容样式可以放弃自由系统设置,最后那是不使用mediaquery来设置小屏幕下的弹出对话框层居左的问题。

2、我们在用jQuery来去处理可以触发弹出对话框层和关闭弹出层效果,应此需要预做程序加载jQuery库。showLayer(id)是一个自定义的函数,单独可以展示弹出层。当点击按钮或链接内部函数这个showLayer(id)函数,它会渐现的效果展示,而且换算弹出层的高度小位移距离,使得提示框主体层水平和互相垂直方向的居中。而原函数hideLayer()那是隐藏地弹出层,slidedown()的或hide()就能基于。到最后再而且不触发遮罩层的时候关闭自动弹出层以及可以使用Esc按钮的时候关掉弹出层的代码。

3、其实到这里,一个都差不多的弹出对话框层效果巳经要做了。我们这里只是做一个基本是的弹出层,你也是可以通过再继续储存代码。我们看完很多弹出来层插件,很多全是相册就不能操作DOM的,也就是通过js代码先queryselectorall,然后再在将内容append到body里的,这种要是是过度能操作DOM的话会会消耗当然的性能,因此从性能角度确定的话,我帮我推荐可以使用本文提供的弹出对话框层。

内容 效果 水平 按钮

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。