网站建设资讯

NEWS

网站建设资讯

jquery弹出层,jquery自带的弹出框

jquery layer弹出层怎么关闭

你看一下layer的官方演示里边就有在iframe中关闭自身的例子

成都创新互联公司自2013年起,先为吉林等服务建站,吉林等地企业,进行企业商务咨询服务。为吉林企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

在你上面的“页面”中,在你提交表单后执行

var index = parent.layer.getframeindex(window.name); //获取当前窗体索引

$('#提交的元素').on('click', function(){

parent.layer.close(index); //执行关闭

});你可能需要修改上面的"submit"提交为button提交

jquery 点击弹出层的确定按钮后,弹出层关闭,部分刷新当前页面的指定的div内容

一个简单的例子

$("button").click(function(){

$("#div1").hide();//关闭弹出层

$("#div2").load('demo_ajax_load.txt');//从另一个文件载入数据更新到ID为div2的内容

});

demo_ajax_load.txt的内容,可以自己写。当然这个文件也可以是asp/php/jsp等文件,只要是能显示内容的,就可以被加载。

怎么将页面的值传到jquery 弹出层中

是后台的返回数据么?

目前我们的http web访问形式,都是应答被动式的,所以 必须要有请求才能返回数据。

首先,用ajax请求一个页面;

页面接收ajax传输的数据后,执行运算,返回数据。直接echo ,response.write之类的输出想要的数据即可。

ajax执行函数中,有success函数可以设定,获取后台页面的输出数据,取得即可

例子:

$.ajax({

url : "admin_login_exec.php",

type : "POST",

dataType : "text",

timeout : 5000,

async : false,

success : function(text) {

//此处text为获得的服务器返回值,赋值到jquery 弹出层即可。比如用个带id的p标签显示数据,获得text后改下值

},

error : function() {

alert("网络或服务器问题!")

}

jquery弹出层,过几秒就消失

首先加一个提示层并隐藏

div id="addBox" style="display:none;"保存成功/div

点击添加后显示,过一段时间后隐藏

$("$addBox").show();

setTimeout($("$addBox").hide(),3000)

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也是关键的部分,我们先设置遮罩层,它默认情况下应该是不可见的,位置上fixed固定的,并且是覆盖整个页面的,它还是半透明的,我们这里设置了背景黑色、透明度0.3,如background-color: rgba(0,0,0,0.3)。然后主体层.hw-layer-wrap,我们设置它的宽度,计算它的位置。宽度我们可以预设一个值,高度由于内容多少不确定,这里我们不用设置一个具体的值,在后面的js部分会对高度处理,然后设置居中以及边框阴影等效果。有关水平和垂直居中的设置可以参阅Helloweba文章:如何让DIV水平和垂直居中。弹出层里面的内容样式可以自由设置,最后就是使用media query来设置小屏幕下的弹出层居中的问题。

2、我们使用jQuery来处理触发弹出层和关闭弹出层效果,应此需要预先加载jQuery库。showLayer(id)是一个自定义的函数,用来展示弹出层。当点击按钮或链接调用这个showLayer(id)函数,它会渐现的效果展示,并且计算弹出层的高度位移距离,使得弹出主体层水平和垂直方向的居中。而函数hideLayer()就是隐藏弹出层,fadeOut()或者hide()就能实现。最后再加上触发遮罩层的时候关闭弹出层以及使用Esc按钮的时候关闭弹出层的代码。

3、其实到这里,一个基本的弹出层效果已经做好了。我们这里只是做一个基本的弹出层,你也可以进行继续扩展代码。我们看过很多弹出层插件,很多都是动态直接操作DOM的,也就是通过js代码先createElement,然后在将内容append到body里的,这种方式如果是频繁操作DOM的话会消耗一定的性能,所以从性能角度考虑的话,我推荐使用本文提供的弹出层方式。


新闻标题:jquery弹出层,jquery自带的弹出框
URL分享:http://njwzjz.com/article/dscdoop.html