Home Web Front-end JS Tutorial 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

May 24, 2018 pm 02:21 PM
jquery Open

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Where can I open the Douyin mini game? Two ways to open Douyin mini games Where can I open the Douyin mini game? Two ways to open Douyin mini games Mar 15, 2024 am 09:30 AM

Where can I open the Douyin mini game? Two ways to open Douyin mini games

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery?

How to open Minesweeper? -How to mark small flags in Minesweeper? How to open Minesweeper? -How to mark small flags in Minesweeper? Mar 18, 2024 pm 10:46 PM

How to open Minesweeper? -How to mark small flags in Minesweeper?

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

jQuery Tips: Quickly modify the text of all a tags on the page

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Use jQuery to modify the text content of all a tags

How to open games on WeGame Tencent game platform - How to open games on WeGame Tencent game platform How to open games on WeGame Tencent game platform - How to open games on WeGame Tencent game platform Mar 04, 2024 pm 10:19 PM

How to open games on WeGame Tencent game platform - How to open games on WeGame Tencent game platform

How to open Siri on Apple mobile phone How to open Siri on Apple mobile phone Mar 08, 2024 pm 04:00 PM

How to open Siri on Apple mobile phone

How to open hdp live broadcast? -What should I do if HDP live streaming crashes? How to open hdp live broadcast? -What should I do if HDP live streaming crashes? Mar 18, 2024 pm 08:25 PM

How to open hdp live broadcast? -What should I do if HDP live streaming crashes?

See all articles