layui根据不同分辨率弹出不同比例的窗口（弹出层）

最新推荐文章于 2021-06-08 14:29:26 发布
最新推荐文章于 2021-06-08 14:29:26 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： layui 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48129874/article/details/106839511
版权
使用layui框架，根据电脑分辨率智能调整弹出窗口的比例，有效解决低分辨率下页面坍塌的问题，实现不同分辨率下弹窗大小的自适应。
摘要由CSDN通过智能技术生成

引用layui框架，根据不同电脑分辨率弹出不同比例的窗口（弹出层）

当电脑页面分辨率较低，页面造成坍塌问题，给不同分辨率的页面设置不同的弹窗百分比大小，问题就解决了。

$("#doupload").click(function () {
   
        layer.open({
   
            title: "上传文件",
最低0.47元/天 解锁文章
weixin_48129874
关注
专栏目录
layui弹窗自适应变大_解决layer弹出层自适应页面大小的问题
weixin_29157361的博客
12-28 2929
前两天在Vue中引入了Vue-layer插件，实现了弹出层效果。不过由于是在22寸屏下开发的，没多想，弹出层的area的长宽就设定的都是800px，效果还很好。结果那给用户看，他们是12寸的笔记本。弹出层直接撑爆了页面，无法关闭。。。P4l免费资源网网上的解决方案大都是以下几种：P4l免费资源网1、改成百分比形式。有bug，下面细说。P4l免费资源网2、改成em，rem等。同上P4l免费资源网3、...
layui之layer根据分辨率调整全屏(js判断分辨率)
★【World Of Moshow 郑锴】★
07-29 3499
问题背景 使用layer作为后台CRUD UI体系的时候，大多数 添加/编辑 功能我是使用了layer.open来打开一个模态页面框。该方案在高分辨率的时候十分友好，但是在低分辨率特别是笔记本上显示效果堪忧，建议全面。 所以我们的解决思路是: 利用js判断分辨率，width横向分辨率 大于 1366则layer默认小窗口，如果横向低于或者等于1366分辨率则直接layer全屏。 大屏的范围一般是从width大于1366开始，例如我这个2k屏编辑起来就超级无敌爽，width小于或者低于1366，例如那些破笔记
layui的弹出层如何自适应屏幕大小？
记录和分享属于我的“IT”时光
06-08 2202
天干物燥，话不多说，直接上代码。 第一步，定义一个变量daxiao，定义函数screen。 第二步，在layer.open中的area属性中对daxiao进行判断。 <script> var daxiao=9; function screen() { //获取当前窗口的宽度 var width = $(window).width(); if (width > 1200) { ret
layui 怎么设置点击图片放大_layui等比例放大/缩小图片
weixin_39850062的博客
12-30 1334
HTMLJS$("#photo").click(function(){showImg($(this));});function showImg(imgData){var img = new Image();img.src = imgData.attr("src");var height = img.height; // 原图片大小var width = img.width; //原图片大小var ...
layui 弹出层回调获取弹出层数据的例子
10-16
在使用layui框架开发Web应用时，经常会遇到需要在弹出层（弹窗）中操作数据并将其返回到主页面的情况。layui的弹出层功能强大，可以用来展示表单、列表或其他复杂内容，并且提供了方便的数据交互机制。本文将详细...
layui 弹出层值回传解决方式
10-16
在使用layui框架构建Web应用时，经常会遇到需要在弹出层（popup layer）与主页面之间传递数据的情况。layui提供了一种优雅的方式来实现弹出层的值回传，本文将详细解析这一功能的实现方法。 首先，我们来看一下...
layui弹出层效果实现代码
08-30
layui弹出层效果实现代码 layui是一款近年来备受青睐的web弹层组件，layer弹出层效果实现代码是其一个非常重要的组件。这篇文章主要介绍了layui弹出层效果的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以...
layui button 按钮弹出提示窗口,确定才进行的方法
10-16
本文将详细介绍如何使用Layui的button组件来实现一个弹出提示窗口的功能，只有当用户点击“确定”后，才会执行特定的操作。 首先，我们要了解Layui的按钮（button）组件。Layui的按钮组件提供了多种样式和功能，...
layer弹出层内容过多时,使用百分比展开页面
csdnxyy的博客
09-19 3284
layer.open({ title: "新增页面", type: 2, area: ['100%', '100%'], offset:'t', scrollbar: false, content: "/wms/manage/list/toAdd" //...
JavaScript——layui.layer弹窗自适应大小
qq_43589143的博客
05-05 2445
如果设置固定百分比来设置弹窗大小，会出现页面过小时，弹窗内容相互遮盖等现象，可以使用如下方法解决 arer设置 area: setpage() setpage()函数 function setpage() { var wid=window.innerWidth; if(wid>600){ return ['50%','90%']; ...
layui适配方案及事件委托
lantern的博客
08-01 204
遇到的问题 网站的分辨率适配,捉急 发现click点击事件不起作用 栅栏的居中显示 解决方法 本来想使用bootstrap来进行分辨率适配的,用起来的时候发现摸不着头脑.于是搜索layui的适配方案,但是没有直接结果.最后让我找到了他的自适应栅栏方案.layui-show-md在md情况下显示,layui-hide-md在md情况下隐藏,layui-md-*md情况下的布局方案. 再...
fc安卓模拟器_叮咚！电脑加入同屏套餐，不必羡慕安卓与IOS——同屏器进阶教程...
weixin_39805851的博客
10-19 1001
大家好，我是和谐。前几天朋友为了让熊孩子上网课，找我买了个同屏器。整体上体验很棒，手机平板全能同屏，IOS安卓通吃，投屏同屏全能干，除了熊孩子天天上课有点头疼，其余的都挺完美。这不周末老师也休息了，朋友父子俩想玩FC模拟器游戏，却发现就算安卓手机扩展出usb接口来，模拟器也只支持一个手柄——难道要搬电脑？那多费事，于是找到了我寻求帮助。其实商品链接里写的Windows系统不支持同屏，需要专门设备—...
layui 弹层自适应_layer实现弹出层自动调节位置
weixin_29219539的博客
02-26 2969
项目中有弹出层的内容是不固定的，根据情况可能变长变短，于是就要求做layer弹出层的大小自适应，查询了api后发现layer.iframeAuto方法可以实现，这里吐槽一点，ie浏览器的html没有被body撑大，而iframeAuto方法是根据html的高度计算的，导致我之前出现在ie下，调用iframeAuto后高度直接变零。好了，做好了这一点之后，测试又提出一个问题，因为他是用小屏幕测试的，...
前端大小屏幕分辨率调试问题——利用火狐或谷歌
热门推荐
tom9238的博客
04-29 2万+
在以前我开发的时候一开始用的小屏幕，后来发现在大屏幕上的布局全乱了，就换了个大屏幕。 您猜怎么着，大屏幕上写的放小屏幕上轮播图等等样式会有部分不显示或者错乱。 后来我就忙碌于大小屏幕来回调试——往事不堪回首。。。如今，我偶然发现Firefox浏览器*Chrome浏览器*都具有一个很强的功能，它可以使用开发工具切换分辨率。接下来我来介绍使用方法。 首先，将你的页面用火狐或谷歌浏览器打开。 注意箭头
最大弹窗_弹窗设计的基本样式和10大应用场景
weixin_29942159的博客
01-16 669
作者对弹窗的基本样式进行了分析梳理，并总结了使用上需要注意的要点，与大家分享。在设计Dialog弹窗时，我们大多时候直接拖控件，直接提交一个基础的规范给前端，甚至只是给几个弹窗样式给他们，导致上线后出现不统一、使用混淆等情况。尽管我们常说要把重心放到重要的界面中，弹窗这些小问题不用在意，但是如果我们通过学习整理，能提前规避这些问题，何乐不为呢？本篇文章就和大家分享了弹窗的基本样式和使用注意要点，让...
layui选项卡与弹出层效果实现代码示例
layui的选项卡功能可以帮助开发者轻松创建多面板的界面，方便用户在不同的内容之间切换。 在描述的代码示例中，首先引入了layui的CSS样式文件，确保元素能够按照layui的设计样式显示。接着，HTML结构中使用了`layui...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值