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

时间:2021-01-11 05:14:16

本文主要介绍了jQuery、layer实现弹出层的打开、关闭功能,需要的朋友可以参考下,希望能帮助到大家。

打开弹出层:

在list页面带入layer.js

在list页面点击时,弹出form弹出层,list.js:

1

2

3

4

5

6

7

8

9

10

11

12

13

$(".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() 

    }); 

  });

在点击form弹出层的“保存”按钮时,如果保存数据成功,则关闭弹出层,并且刷新list页面:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<span style="color:#000099;">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"

            </span><span style="color:#ff6666;"> var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 

            parent.layer.close(index); </span><span style="color:#000099;">

          

        

      ); 

    } </span>