使用JavaScript實現(xiàn)改造layer彈層移動版組件

更新時間：2024年04月28日 09:17:07 作者：初九之潛龍勿用

這篇文章主要為大家詳細介紹了使用JavaScript實現(xiàn)改造layer彈層移動版組件的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

序

我們決定在自研的Craneoffice.net框架中，引入 layer彈出層移動版，無須引用 jquery，改造思路是用不同顏色的樣式表達不同的警告級別，另外通過一些代碼，解決不能嵌入或嵌入 iframe 不理想的問題。

添加了一個方法

添加了 layer.gt(type) 方法，該方法用于便捷的設(shè)置警告類型樣式，返回值為樣式字符串。

參數(shù)介紹

layer.gt('ok') 成功類型的提示樣式

layer.gt('error') 錯誤類型的提示樣式

layer.gt('info') 信息類型的提示樣式

layer.gt('alert') 警告類型的提示樣式

代碼示例

layer.open({
                style: layer.gt('ok'),
                content: '歡迎使用云服務(wù)。這是改造版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不要設(shè)置百分比
            ifr.innerHTML = iframepage;
            layer.open({
                style: layer.gt('ok'),
                type: 0,
                content: ifr.outerHTML,
                btn: '關(guān)閉',
                yes: function () {
                    layer.closeAll();
                }
            });

通過這段代碼可以正確顯示想要達到的效果，顯示如下圖：