首頁  >  文章  >  web前端  >  layui怎麼調整彈框大小

layui怎麼調整彈框大小

藏色散人
藏色散人原創
2020-11-18 10:34:035733瀏覽

layui調整彈框大小的方法:先新建一個html程式碼頁面;然後使用link連結一個外部樣式layer.css檔案;接著建立彈出框;最後在「layer.opren()」方法裡面使用“area:[]”設定彈出框的大小即可。

layui怎麼調整彈框大小

推薦:《layUI教學

開啟前端開發工具,新建一個html程式碼頁面

layui怎麼調整彈框大小

找打頁面上的

標籤,在這個標籤後面使用link連結一個外部樣式layer.css檔案<p><img src="https://img.php.cn/upload/image/164/916/295/1605666728677014.png" title="1605666728677014.png" alt="layui怎麼調整彈框大小"></p> <p>在連結的layer.css檔案後面插入外部的jquery.js、layer.js這兩個外部檔案</p> <p><img src="https://img.php.cn/upload/image/472/282/979/1605666732908481.png" title="1605666732908481.png" alt="layui怎麼調整彈框大小"></p> <p>建立彈出框。建立一個新的<script>標籤,然後在這個標籤裡面使用layer.open()建立彈出框功能。 </script></p> <p>建立彈出框程式碼:</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="layui怎麼調整彈框大小"></p> <p>查看彈出框效果。儲存html程式碼檔案後使用瀏覽器開啟,這個時候看到彈出框已經功能已經實現</p> <p><img src="https://img.php.cn/upload/image/939/620/517/1605666746963699.png" title="1605666746963699.png" alt="layui怎麼調整彈框大小"></p> <p>#修改彈出框大小。在layer.opren()方法裡面使用area:[]設定彈出框的寬/高。 </p> <p>程式碼:</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="layui怎麼調整彈框大小"></p> <p>儲存html程式碼後重新刷新瀏覽器頁面,即可看到彈出框的大小已被修改</p> <p> <img src="https://img.php.cn/upload/image/130/946/236/1605666758532235.png" title="1605666758532235.png" alt="layui怎麼調整彈框大小"></p>#

以上是layui怎麼調整彈框大小的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn