本文介绍在 Craneoffice.net 框架中引入并改造 layer 移动版弹出层的方案。通过新增 layer.gt(type) 方法实现不同警告级别的样式区分，并解决 iframe 嵌入时的显示问题。文章提供了具体的代码示例，展示了如何设置成功、错误、信息和警告类型，以及如何实现无边距嵌入 iframe 以达到理想显示效果。
序
在自研的 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组件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！