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><pre class="brush:php;toolbar:false">layer.open({
type: 2,
content: "test.html"
})</pre><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><pre class="brush:php;toolbar:false">layer.open({
type: 2,
area:["500px","400px"],
content: "test.html"
})</pre><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!
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
