改造 layer 弹层移动版组件

序

我们决定在自研的Craneoffice.net框架中，引入 layer弹出层移动版，无须引用 jquery，改造思路是用不同颜色的样式表达不同的警告级别，另外通过一些代码，解决不能嵌入或嵌入 iframe 不理想的问题。

演示视频

改造版layer组件演示视频

添加了一个方法

添加了 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 = '