Layer closes the pop-up layer and refreshes the parent interface function implementation method

This article mainly introduces the layer's function of closing the pop-up layer and refreshing the parent interface. It analyzes the common implementation techniques and related operation precautions of using layui's layer to refresh the parent interface when closing the pop-up layer. Friends in need can refer to the following. , hope it can help everyone.

The example in this article describes the layer function of closing the pop-up layer and refreshing the parent interface. Share it with everyone for your reference, the details are as follows:

layer is a web elastic layer component that has been popular in recent years. It has a full range of solutions and is committed to serving developers of all levels. You The pages will easily have a rich and friendly operating experience.

A recent project uses the hui front-end framework, and its pop-up layer uses the layer plug-in. For the pop-up layer, there is an operating experience that everyone knows, that is, to close the pop-up layer, the parent page needs to be refreshed. When I started writing, I fell into my own misunderstanding. After the pop-up layer was successfully processed, what I called was:

var index = parent.layer.getFrameIndex(window.name);
parent.location.href=url;
parent.layer.close(index);

This is correct, but If written like this, it can only be called from one place. If called from multiple places, it cannot return to the original address, but redirects to a new url address. And just in the middle of my project, a certain pop-up layer was called from two places, so obviously this solution is not suitable and needs to be optimized. After searching on Baidu, I found the following two optimization solutions:

Option 1:

Call the parent interface reload function in the layer pop-up layer

window.parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

Option 2:

Call the end callback method of the layer plug-in:

end - the callback triggered after the layer is destroyed

Type: Function, default: null

Whether it is confirmation or cancellation, as long as the layer is destroyed, end will be executed without carrying any parameters.

When the parent window opens the layer pop-up box, add the end callback

function openLayer() {
  //iframe层
    parent.layer.open({
      type: 2,
      title: '修改',
      shadeClose: false, //点击遮罩关闭
      shade: 0.8,
      area: ['30%', '45%'],
      maxmin: true,
      closeBtn: 1,
      content: [url, 'yes'], //iframe的url，yes是否有滚动条
      end: function () {
        location.reload();
      }
});

After the layer pop-up box processing is completed, there is no need to call other refresh operation functions. Just close it directly

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

Comparatively speaking, the first solution is better, because in terms of operation logic, manually closing the pop-up box should not trigger a refresh operation. Only when the processing logic of the pop-up box is executed successfully and the function is called to close the pop-up box will the parent interface refresh operation be triggered. Based on this logic, option one should be selected. Option two, the page will be refreshed no matter what, which actually increases the processing pressure of the server for no reason.

Solution 2: can solve the problem of sending the processed results of the sub-page to the parent page of the sub-page.

For layer.js, when a callback occurs to close the pop-up layer of the parent class, the submit of the previous form fails:

How to solve: There are many on the Internet, and some are redirected For ajax requests, close the parent pop-up layer after data transmission:

The following is how to close the parent pop-up layer:

##

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index); // 关闭layer

$("#myForm").submit();
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
setTimeout(function () {
  parent.layer.close(index); // 关闭layer
},500);

Detailed explanation of layer parent-child page interaction in the layui framework

The layer front-end component in layui implements the image display function

jQuery, layer realizes the opening and closing function of the pop-up layer. Detailed explanation of examples

The above is the detailed content of Layer closes the pop-up layer and refreshes the parent interface function implementation method. For more information, please follow other related articles on the PHP Chinese website!