layer.js解决layer.alert()水平方向不居中问题

是移动端的使用场景，因为项目需要，使用的是PC端的layer.js，提示文字长的时候layer.alert()就不能居中显示了，就像下面这个样子：

修改之后的效果：

解决方案1：做移动端项目的时候，尽量使用mobile版本的layer.js弹出层插件，如果必须要用PC版本的，那么请看我的解决方案2。

解决方案2（不太推荐）：在弹出后检查修正一下弹出的layer弹出层的css，代码如下：

var strly = layer.alert(data.errmsg);
var strly_left = $('#layui-layer' + strly).css("left");
$('#layui-layer' + strly).css("right",strly_left);

解决方法3（推荐）：尽量使用layer.open()方法展示弹出层，并制定宽度和高度，如果高度不能确定，可以将高度指定为auto，代码如下：

//以下代码-10和-140是根据我自己的业务情况来的，可以酌情使用，就是提供个思路而已
msgboxWidth = screen.availWidth - 10 + 'px';
msgboxHeight = screen.availHeight - 140 + 'px';
layer.open({content:'为保证更多人有获奖机会，<br>请在上午<b>9:00</b>后参与活动。<br>上午<b>9:00</b>之前<b>只能答题和学习</b>，不能参与抽奖。',area: [msgboxWidth, 'auto'],btn:'确定'
});

效果展示：

layer是非常优秀的弹出层插件，停更了真令人惋惜。

layer.js解决layer.alert()水平方向不居中问题相关推荐

layer.js确认框
layer.js的确认框写法: 前提是在页面html里加载layer.js的路径 <script src="./../../../static/plugins/layer/layer. ...
layer.js 弹窗组件API文档
基础参数 type title content skin area offset icon btn closeBtn shade shadeClose time id shift maxmin fix ...
confirm关闭 layer_基于 vue+layer.js 超青睐的弹窗组件VueLayer
今天给大家分享一个功能强健高水准的web弹窗组件VueLayer. vue-layer 一款备受web开发者青睐的layer.js弹窗组件的vue.js版本.拥有丰富友好的操作体验及文档,兼容主流浏览 ...
Dorado7 notify非alert 输入框prompt confirm layer dialoger，layer.msg，toast效果，几秒关闭layer.load layer.open
IDEA-layer 方式一:layer.alert() layer.alert("当前行的下标:" + row.username, {icon: 0}); icon=0 1 2 ...
loading加载和layer.js
layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术前端:HTML5+CSS3+JS+layer.js 后端:.net 2. ...
jquery 左右移动以及使用layer.js弹出框呈现在页面上
今天写了一个左右移动但是发现自己写的css效果一直都加不上去,不管了,还是先上自己有问题的代码,毕竟在失败中发现问题也是一种成长么. 好吧,其实我们都知道在列表有边框里,它的值来源于左边框,那么如果 ...
html引入layer.js,require.js引用jquery、layer的简单实例用法
来源: 未知发布时间: 2017-10-13 次浏览用法: 第一步在html页面上引入JS: 第一个require.js,注意引用的时候加了一个data-main="./index&qu ...
Layer.js——强大的弹出框
简介 layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
layer.js遇到的问题: layer.open is not a function
出现的问题: layer.open is not a function 解决方案: 首先检查jquery和layer的版本我的juqery的版本: /*! jQuery v1.7.2 jquery ...

layer.js解决layer.alert()水平方向不居中问题

layer.js解决layer.alert()水平方向不居中问题相关推荐

最新文章

热门文章