jQuery、layer实现弹出层的打开、关闭功能

使用jQuery和layer实现弹出层的优雅打开与关闭

在web开发中，弹出层是一种常见的交互方式。今天，我们将通过jQuery和layer库来展示如何轻松地实现弹出层的打开和关闭功能。

一、打开弹出层

在list页面引入layer.js。当用户在list页面点击时，将触发一个事件，随即弹出一个form弹出层。以下是实现这一功能的代码片段：

```javascript

$(".add_category,.update").click(function(){

var doMain = $('.domain_name').val();

layer.open({

shade: [0.5, '000', false],

type: 2,

area: ['900px', '530px'],

fix: false, //不固定

maxmin: true,

title: ['添加或修改用户类型', false],

content: doMain+"/Stat/QueryUserCategoryForm.action?adminUserCategory.id="+$(this).val()

});

});

```

二、关闭弹出层并刷新list页面

在form弹出层中，当点击“保存”按钮时，如果数据保存成功，我们需要关闭弹出层，并刷新list页面的数据。以下是实现这一功能的代码片段：

```javascript

submitHandler: function (form){

$.post(

$('.domain_name').val()+"/Stat/AddOrUpdateUserCategory.action",

$(form).serialize(),

function(data){

var result = eval("("+data+")");

if(!result.status){

alert(result.message);

} else {

// 数据保存成功，先刷新列表页面的数据，再关闭弹出窗

parent.window.location.href=$('.domain_name').val()+"/Stat/QueryUserCategoryListStat.action";

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

parent.layer.close(index);

}

}

);

}

```

以上就是使用jQuery和layer实现弹出层的打开和关闭功能的介绍。希望这个例子能帮助你更好地理解和应用弹出层。如果你有任何疑问或需要进一步的帮助，请随时联系我。非常感谢大家对狼蚁SEO网站的支持！我们将持续为大家提供更多有价值的技术分享。 感谢大家一直以来的关注和信任，我们期待与你共同进步，共同学习，共同成长。再次感谢！