How to close layui's open

藏色散人
Release: 2020-11-30 11:37:16
Original
6373 people have browsed it

Layui open closing method: first open and view the js part; then go to the modify article page; finally use the "layer.close(index)" method in the JS part of "articleUpdate.jsp" to close the specific layer. Can.

How to close layui's open

The operating environment of this tutorial: windows10 system, layui2.5.6. This article is applicable to all brands of computers.

Recommended: "layui tutorial"

layui-open closes its own window solution


1. The pop-up window here pops up a page, which pops up after passing through the background.

1.1. Implementation of the pop-up window

1.1 .1. The js part

function getArticleById(articleId){ var index = layer.open({ type: 2, title: '修改管理员', area: ['90%', '95%'], shade: 0.8, resize: false, fixed: false, move: false, shadeClose: false, content: '${ctxPath}/article/getArticleById?articleId='+articleId }); }
Copy after login

1.1.2. The background Java part

/** * 去到修改文章页面 * */ @RequestMapping("/getArticleById") public String getArticleById(@RequestParam("articleId") Integer articleId,Model model) { MrtArticle mrtArticle = mrtArticleService.getArticleById(articleId); model.addAttribute("mrtArticle",mrtArticle); return "article/articleUpdate"; }
Copy after login

The page will pop up when you get here

1.2 , close the pop-up window, use the following two lines of code in the JS part of articleUpdate.jsp to close itself

//当你在iframe页面关闭自身时 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭 layer.alert('提交成功', { skin: 'layui-layer-molv' //样式类名 自定义样式 ,closeBtn: 1 // 是否显示关闭按钮 ,anim: 1 //动画类型 ,btn: ['确定'] //按钮 ,icon: 6 // icon ,yes:function(){ //当你在iframe页面关闭自身时 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭 } });
Copy after login

layer.close(index) - Close a specific layer

There seems to be no need to introduce much about it. The only thing that makes you confused may be thisindex. In fact it's very easy to get.

codelayui.code

  1. //When you want to close a layer of the current page
  2. var index = layer.open();
  3. var index = layer.alert();
  4. var index = layer.load();
  5. var index = layer.tips();
  6. //Just like As you can see, every method of calling the elastic layer will return an index
  7. layer.close(index); //At this time, you only need to give the obtained index gently to layer.close. Can
  8. //If you want to close the latest pop-up layer, just get layer.index directly
  9. layer.close(layer.index); //It gets is always the latest pop-up layer, and the value is calculated dynamically and incrementally within the layer
  10. //When you close yourself on the iframe page
  11. var index = parent.layer.getFrameIndex(window.name); //Get the index of the current iframe layer first
  12. parent.layer.close(index); //Execute the shutdown again
##layer.closeAll(type) - Close all layers

If you are lazy, youdon't want to get the indexyou just want to close. Then closeAll can really help you. If you don't point to a layer type, it will destroy all layers on the current page. Of course, if you only want to close a certain type of layer, then you can

codelayui.code

  1. layer.closeAll(); //Crazy mode, close all layers
  2. layer.closeAll('dialog'); //Close the information box
  3. layer.closeAll('page'); //Close all page layers
  4. layer.closeAll(' iframe'); //Close all iframe layers
  5. layer.closeAll('loading'); //Close the loading layer
  6. layer.closeAll('tips'); //Close all Tips layer

The above is the detailed content of How to close layui's open. 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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!