Home > Web Front-end > JS Tutorial > body text

Detailed explanation of examples of opening and closing pop-up layers using jQuery and layer

小云云
Release: 2018-05-24 14:21:21
Original
3136 people have browsed it

This article mainly introduces jQuery and layer to realize the opening and closing functions of the pop-up layer. Friends who need it can refer to it. I hope it can help everyone.

Open the pop-up layer:

Bring in layer.js on the list page

When clicked on the list page, the form pop-up layer pops up, list.js:

$(".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()  
    });  
  });
Copy after login

When you click the "Save" button of the form pop-up layer, if the data is saved successfully, the pop-up layer will be closed and the list page will be refreshed:

<span style="color:#000099;">submitHandler: function (form){  
      $.post(  
        $(&#39;.domain_name&#39;).val()+"/Stat/AddOrUpdateUserCategory.action",  
        $(form).serialize(),  
        function(data){  
          var result = eval("("+data+")");  
          if(!result.status){  
            alert(result.message);  
          }else{  
            //添加数据成功,关闭弹出窗之前,刷新列表页面的数据  
            parent.window.location.href=$(&#39;.domain_name&#39;).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>
Copy after login

Related recommendations:

Detailed explanation of the use of Jquery pop-up layer ThickBox plug-in

js implements the window function code for closing the js pop-up layer

jQuery implements the pop-up layer by clicking anywhere Close the pop-up layer effect

The above is the detailed content of Detailed explanation of examples of opening and closing pop-up layers using jQuery and layer. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template