Reprinted from: http://www.884358.com/php-layer/

In development, it is often encountered that click the button to pop up the display form, fill in the information in the form, click save, and finally return to the list page.

The friendly effect we want to achieve is usually: the user clicks the button to pop up the child window. After filling out the form information in the child window, the user clicks the save button in the child window, and the page prompts that the saving is successful, closes the child window, and finally refreshes the parent page.

For a more elegant pop-up, we use Layer, a great jQuery plugin. In the process of use, we can easily pop up the page we want, such as the form filling page. For example, the following page:

<! DOCTYPE HTML > < HTML lang="en"> <head> <title> Pop-up test </title> <meta charset=" UTF-8 "/> <script SRC = "https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/layer/3.0.1/layer.min.js" > < / script > < / head > < body > < button </button> </body> </ HTML > <script> function refresh() {location.reload(); $('#parentIframe').on('click', function () {layer.open({type: 2, title: 'parentIframe', maxmin: True, shadeClose: true, / / click on the layer mask closed area: [' 800 px ', '520 px], content: "http://127.0.0.1/test/layer/form.php"}); }); </script>

Click click the pop-up window, page pops up child window display http://127.0.0.1/test/layer/f… Form.php has the following code:

<? PHP if ($_POST) {// handle your business... echo "<script>parent.parent.layer.closeAll(); Parent.parent.layer. MSG (' Added successfully, page refreshing '); parent.parent.setTimeout('refresh()',2000); </script>"; die; }? > <! DOCTYPE HTML > < HTML lang="en"> <head> <title> <meta charset=" UTF-8 "/> </head> <body> <iframe name="iframe"  id="iframe" style="display:none"></iframe> <form action="#" method="post" target="iframe"> <table border="1"> <tr> Name of the < td > < / td > < td > < input type = "text" name = "username" / > < / td > < / tr > < tr > < td > age < / td > < td > < input type = "text" Name = "age" / > < / td > < / tr > < tr > < td colspan = "2" > < input type = "submit" value = "submit" / > < / td > < / tr > < / table > < / form > < / body > </html>

Note that the target attribute of the form is the iframe of this page. The name of the target is the name of the iframe. If you click the submit button, the page will submit the form information to the iframe. Since the iframe does not specify the SRC attribute, the iframe address is the page itself, and display: None is set, so it is not visible. You can also delete display: None for now). So it’s equivalent to the form being submitted to the page itself, but it’s displayed in its own iframe. The purpose of the JS code is to close the layer popup window of the top-level parent window, display a prompt in the top-level parent window, and finally make the top-level parent page refresh itself after two seconds.