Layer.js Bullet box display is not full of problems

When using Layer.js to do the frame, when the browser is zoomed out, the box display is not full of problems, as follows:

This is not possible, because we sometimes want to narrow the browser window, but once reduced to a certain extent, will be the pop-up button to cover a part of the window, and the main frame will also appear up and down the scroll bar, for the customer experience is very poor

1. The code used for the popup window is called as follows:

1 Layer.open ({2                title:false,3                type:2,4                 Content: ['./detail/zhuce.html ', ' no '],5area                : [' 400px ', ' 650px '],6            });

From the above parameters, the width is fixed, but why the window shrinks, the display is not the same

2. The suspicion is caused by CSS, which affects the Close button, view the Close button of the CSS, as follows:

1 . Layui-layer-setwin. Layui-layer-close2{2 position:Absolute;3  Right:-28px;4 Top:-28px;5 width:30px;6 Height:30px;7 Margin-left:0;8 background-position:-149px-31px;9}

As can be seen, the position of the close button is a bit beyond the main body, then the Close button to move into the body, whether it can be OK? Add the following settings to the CSS:

1{2    right: -13px!important;  3    top: -13px!important;  4 }

After the change, the following results are displayed:

Actually OK, no matter how to narrow the window, will not hide the close button, there will be no scroll bar

All in all: the Close button is partially hidden after the window is zoomed out, because the CSS of the Close button is causing it, as long as the close button is moved to the main position, the display effect is OK.

Layer.js Bullet box display is not full of problems