Home  >  Article  >  Web Front-end  >  Detailed explanation of examples of opening and closing pop-up layers using jQuery and layer

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

小云云
小云云Original
2018-05-24 14:21:213132browse

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()  
    });  
  });

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>

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!

Statement:
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