How to adjust the size of the pop-up box in layui: first create a new HTML code page; then use link to link an external style layer.css file; then create a pop-up box; and finally use it in the "layer.opren()" method "area:[]" can set the size of the pop-up box.
Recommended: "layUI Tutorial"
Open the front-end development tool and create a new html code page
Look for the
tag on the page, and use link behind this tag to link an external style layer.css file<p><img src="https://img.php.cn/upload/image/164/916/295/1605666728677014.png" title="1605666728677014.png" alt="How to adjust the size of the pop-up box in layui"></p>
<p>Insert the two external files jquery.js and layer.js after the linked layer.css file </p>
<p><img src="https://img.php.cn/upload/image/472/282/979/1605666732908481.png" title="1605666732908481.png" alt="How to adjust the size of the pop-up box in layui"></p>
<p> to create a pop-up box. Create a new <script> tag, and then use layer.open() in this tag to create a pop-up box function. </script></p>
<p>Create pop-up box code: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">layer.open({
type: 2,
content: "test.html"
})</pre><div class="contentsignin">Copy after login</div></div><p><img src="https://img.php.cn/upload/image/796/844/341/1605666742814047.png" title="1605666742814047.png" alt="How to adjust the size of the pop-up box in layui"/></p><p>View the pop-up box effect. After saving the html code file, open it with a browser. At this time, you can see that the pop-up box has been functionally implemented</p><p><img src="https://img.php.cn/upload/image/939/620/517/1605666746963699.png" title="1605666746963699.png" alt="How to adjust the size of the pop-up box in layui"/></p><p>Modify the size of the pop-up box. Use area:[] in the layer.opren() method to set the width/height of the pop-up box. </p><p>Code: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">layer.open({
type: 2,
area:["500px","400px"],
content: "test.html"
})</pre><div class="contentsignin">Copy after login</div></div><p><img src="https://img.php.cn/upload/image/690/136/401/1605666754469863.png" title="1605666754469863.png" alt="How to adjust the size of the pop-up box in layui"></p>
<p>Save the html code and refresh the browser page, you can see that the size of the pop-up box has been modified</p>
<p><img src="https://img.php.cn/upload/image/130/946/236/1605666758532235.png" title="1605666758532235.png" alt="How to adjust the size of the pop-up box in layui"></p>
The above is the detailed content of How to adjust the size of the pop-up box in layui. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
