RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
layui如何调整弹框大小-创新互联

这篇文章主要介绍了layui如何调整弹框大小,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

成都创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,小程序制作,十多年建站对资质代办等多个行业,拥有丰富的网站运维经验。

layui调整弹框大小的方法:首先新建一个html代码页面;然后使用link链接一个外部样式layer.css文件;接着创建弹出框;最后在“layer.opren()”方法里面使用“area:[]”设置弹出框的大小即可。

打开前端开发工具,新建一个html代码页面

layui如何调整弹框大小

找打页面上的标签,在这个标签后面使用link链接一个外部样式layer.css文件</p><p><img src="/upload/otherpic11/1435.jpg" alt="layui如何调整弹框大小"></p><p>在链接的layer.css文件后面插入外部的jquery.js、layer.js这两个外部文件</p><p><img src="/upload/otherpic11/1436.jpg" alt="layui如何调整弹框大小"></p><p>创建弹出框。创建一个新的<script>标签,然后在这个标签里面使用layer.open()创建弹出框功能。</p><p>创建弹出框代码:</p><pre>layer.open({ type: 2, content: "test.html" })</pre><p><img src="/upload/otherpic11/1437.jpg" alt="layui如何调整弹框大小"></p><p>查看弹出框效果。保存html代码文件后使用浏览器打开,这个时候看到弹出框已经功能已经实现</p><p><img src="/upload/otherpic11/1438.jpg" alt="layui如何调整弹框大小"></p><p>修改弹出框大小。在layer.opren()方法里面使用area:[]设置弹出框的宽/高。</p><p>代码:</p><pre>layer.open({ type: 2, area:["500px","400px"], content: "test.html" })</pre><p><img src="/upload/otherpic11/1439.jpg" alt="layui如何调整弹框大小"></p><p>保存html代码后重新刷新浏览器页面,即可看到弹出框的大小已被修改</p><p><img src="/upload/otherpic11/1440.jpg" alt="layui如何调整弹框大小"></p><p>感谢你能够认真阅读完这篇文章,希望小编分享layui如何调整弹框大小内容对大家有帮助,同时也希望大家多多支持创新互联<a href="https://www.cdcxhl.com/" target="_blank">网站建设公司</a>,,关注创新互联行业资讯频道,遇到问题就找创新互联网站建设公司,,详细的解决方法等着你来学习!</p> <br> 新闻名称:layui如何调整弹框大小-创新互联 <br> 本文链接:<a href="http://www.jxjierui.cn/article/ejhci.html">http://www.jxjierui.cn/article/ejhci.html</a> </div> <div class="hot_new"> <div class="page_title clearfix"> <h3>其他资讯</h3> </div> <div class="news_list clearfix"> <ul> <li> <a href="/article/jjpsjo.html">原生JS实现轮播图效果的方法</a> </li><li> <a href="/article/jjpeij.html">JavaScript如何实现的简单Tab点击切换功能</a> </li><li> <a href="/article/jjpeeh.html">Python任意网段端口信息探测工具的示例分析</a> </li><li> <a href="/article/jjpegh.html">iOS发送短信功能的实现代码</a> </li><li> <a href="/article/jjpejc.html">如何理解Linux中Xen的奇异架构</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 底部信息 --> <div class="footer wow fadeInUp"> <div class="rowFluid"> <div class="span12"> <div class="container"> <div class="footer_content"> <div class="span4 col-xm-12"> <div class="footer_list"> <div class="span6"> <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div> </div> <div class="span6 col-xm-12"> <div class="quick_navigation"> <div class="quick_navigation_title">快速导航</div> <ul> <li><a href="http://www.cdxwcx.cn/tuoguan/dazhou.html" title="达州服务器托管" target="_blank">达州服务器托管</a></li><li><a href="http://www.cdjbgc.com/" title="成都搅拌罐车" target="_blank">成都搅拌罐车</a></li><li><a href="https://www.cdcxhl.cn/ " title="香港主机" target="_blank">香港主机</a></li><li><a href="http://seo.cdcxhl.cn/" title="成都网站推广" target="_blank">成都网站推广</a></li><li><a href="http://www.ytmtp.com/" title="成都木托盘" target="_blank">成都木托盘</a></li><li><a href="http://www.ysfsjgs.com/" title="书籍刊物设计" target="_blank">书籍刊物设计</a></li><li><a href="http://www.cdzunge.cn/" title="尊格展览" target="_blank">尊格展览</a></li> </ul> </div> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_link"> <div class="footer_link_title">友情链接</div> <ul id="frientLinks"> <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a> <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a> <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a> <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a> </ul> <div class="footer_link_title">网站建设</div> <ul id="frientLinks"> <li><a href="/">内江浩晨众云建站</a></li> <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li> </ul> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_cotact"> <div class="footer_cotact_title">联系方式</div> <ul> <li><span class="footer_cotact_type">企业:</span><span class="footer_cotact_content">青羊区浩晨众云设计工作室(个体工商户)</span></li> <li><span class="footer_cotact_type">地址:</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li> <li><span class="footer_cotact_type">电话:</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li> <li><span class="footer_cotact_type">网址:</span><span class="footer_cotact_content"><a href="/" title="内江网站建设">www.jxjierui.cn</a></span></li> </ul> </div> </div> </div> </div> </div> <div class="copyright"> <p>公司名称:青羊区浩晨众云设计工作室(个体工商户) 联系电话:18980820575</p> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号:蜀ICP备2025119795号-2</a></p> <p>内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p> </div> </div> </div> </div> </body> </html> <script> $(".technical_support_box_z_info_box img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>