使用JavaScript实现改造layer弹层移动版组件
更新时间：2024年04月28日 09:17:07 作者：初九之潜龙勿用
这篇文章主要为大家详细介绍了使用JavaScript实现改造layer弹层移动版组件的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
序
我们决定在自研的Craneoffice.net框架中，引入 layer弹出层移动版，无须引用 jquery，改造思路是用不同颜色的样式表达不同的警告级别，另外通过一些代码，解决不能嵌入或嵌入 iframe 不理想的问题。
添加了一个方法
添加了 layer.gt(type) 方法，该方法用于便捷的设置警告类型样式，返回值为样式字符串。
参数介绍
layer.gt('ok') 成功类型的提示样式
layer.gt('error') 错误类型的提示样式
layer.gt('info') 信息类型的提示样式
layer.gt('alert') 警告类型的提示样式
代码示例
layer.open({
style: layer.gt('ok'),
content: '欢迎使用云服务。这是改造版layer弹出框！',
btn: ['Yes', 'no', 'Canel'],
shadeClose: false,
yes: function () {
layer.open({
content: '点击了 Yes 按钮'
, time: 2
, skin: 'msg'
});
},
no: function () {
layer.open({
content: '点击了 No 按钮'
, time: 2
, skin: 'msg'
});
},
cancel: function () {
layer.open({
content: '点击了 Canel 按钮'
, time: 2
, skin: 'msg'
});
}
});给style属性通过这个方法赋值就可以了。
嵌入iframe
代码示例
var url = 'https://cn.bing.com/';
var ifr = document.createElement("div");
var iframepage = '<iframe src="' + url + '" frameborder="0" height="400" width="100%" >'; //height不要设置百分比
ifr.innerHTML = iframepage;
layer.open({
style: layer.gt('ok'),
type: 0,
content: ifr.outerHTML,
btn: '关闭',
yes: function () {
layer.closeAll();
}
});通过这段代码可以正确显示想要达到的效果，显示如下图：
可实现无边距的嵌入iframe。
小结
这是我们引用的layer弹出层的早期组件，属于移动版，针对其中的改造只是体现了自己的一些设计想法，希望大家批评指正。
到此这篇关于使用JavaScript实现改造layer弹层移动版组件的文章就介绍到这了,更多相关JavaScript改造layer组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代，直接给一个兼容的Code，下面有个不错的示例，喜欢的朋友可以收藏下2013-12-12
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
今天小编就为大家分享一篇在layui中对table中的数据进行判断(0、1)转换为提示信息的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
JavaScript是一种解释执行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，它遵循ECMAScript标准。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，主要用来给HTML增加动态功能2018-01-01
用Javascript评估用户输入密码的强度（Knockout版）
早上看到博友6点多发的一篇关于密码强度的文章（连接），甚是感动（周末大早上还来发文）2011-11-11
这篇文章介绍了Javascript中的循环优化，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了JavaScript解析及序列化JSON的方法,结合实例形式分析javascript针对json格式数据的解析、序列化等相关操作技巧,需要的朋友可以参考下2019-01-01
currying函数是一种返回函数的函数，是闭包最伟大的应用之一。有关闭包更详细的定义可参见这里与这里。如下currying函数的一种定义。2009-11-11
这篇文章主要介绍了基于原生js实现判断元素是否有指定class名,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
JavaScript中几种常见排序算法小结，学习js的朋友可以参考下，下面对多种方法进行了简单的小结。2011-02-02
这篇文章主要介绍了SpringMVC返回json数据的三种方式的相关资料,需要的朋友可以参考下2015-12-12
最新评论