JS popup child window

Purpose

In a main window, click a link, a sub-window pops up, the parent window remains
in the sub-window and clicks close to close the sub-window. The position of the sub-window is in the middle of the screen

accomplish

main.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/></head>
<body>
<a href="" id="a1" target="new">新窗口</a>
<div id="msg"></div>
<script>
    var a1 = document.getElementById('a1');
    a1.onclick = function(){
        window.open('alert.html', 'new', 'location=no, toolbar=no');
        return false;
    }
</script>
</body>
</html>

Note: location=no will pop up a sub-window, otherwise, a new page will be opened in the current browser
toolbar=no will make the sub-window in the middle of the screen.

alert.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <input type="text" name="message" id="m1"/><br/>
        <input type="button" id="btn" value="关闭"/><br/>
        <script type="text/javascript">
            var btn = document.getElementById('btn');
            var message = document.getElementById('m1');
            btn.onclick = function(){
                var div = window.opener.document.getElementById('msg');
                div.innerHTML = message.value;
                window.close();
            };           
        </script>
    </body>
</html>

Related parameters:

window.open is the command to pop up a new window;

    "page.html" is the file name of the pop-up window;

    "newwindow" is the name of the pop-up window (not the file name), optional, and can be replaced by "empty";

    height=100 window height;

    width=400 Window width;

    top=0, the pixel value of the window from the top of the screen;

    left=0, the pixel value of the window from the left side of the screen;

    toolbar=no whether to display the toolbar, yes is displayed;

    menubar, scrollbars represent the menu bar and scroll bar.

    resizable=no whether it is allowed to change the window size, yes is allowed;

    location=no whether to display the address bar, yes is allowed;

    status=no whether to display the information in the status bar (usually the file has been opened), yes is allowed;

Case: WeChat QR code centered pop-up window

Effect picture:

<div id="b3" class="btn wow fadeInUpBig" data-wow-delay="1.0s">
      <a class="wei-xin" href="javascript:void(0)" target="new" title="添加微信"><i class="fa fa-weixin"></i></a>
      <div id="msg"></div>
</div>

//微信子窗口
    var b3 = document.getElementById('b3');
    var windowTop = (window.screen.height-300)/2; 
    var windowSide = (window.screen.width-400)/2;
    var windeowparameter = 'height=300, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no';
    windeowparameter += ','+'top='+windowTop;
    windeowparameter +=','+'left='+windowSide;
    b3.onclick = function(){
        // alert(windeowparameter)
        window.open('__MODULE__/Index/alert', 'new', windeowparameter);
        return false;
    }

Expansion: the width and height involved

The width of the visible area of the page: document.body.clientWidth;  
The visible area of the web page is high: document.body.clientHeight;  
The width of the visible area of the web page: document.body.offsetWidth (including the width of the border);  
The height of the visible area of the web page: document.body.offsetHeight (including the width of the border);  
The full text width of the page body: document.body.scrollWidth;  
The height of the full text of the page body: document.body.scrollHeight;  
The height of the page being scrolled: document.body.scrollTop;  
The left side of the page is scrolled: document.body.scrollLeft;  
On the body of the page: window.screenTop;  
The left part of the body of the webpage: window.screenLeft;  
The height of the screen resolution: window.screen.height;  
The width of the screen resolution: window.screen.width;  
Screen available workspace height: window.screen.availHeight;