Layer——skin的使用方法

---恢復內容開始---

如果是Layui單獨版本,官網上很明確,如果是Layui使用layer就要將樣式表文件要放在這個文件夾下

 

在這個style.css文件里 分別編寫，標題欄的樣式，和a標簽的樣式（寫你想設置的相應風格的css樣式就行了）

 

頁面初始化時加載配置

1.如果設置全部的layer彈窗都為這個樣式（頁面初始化就要完成這個步驟，Load事件）         一次加載配置全部Layer使用統一風格

                //頁面加載的時候加載配置皮膚文件
                layer.config({
                    extend: 'myskin/style.css',         //加載您的擴展樣式//默認皮膚配置文件是放在css/modal/layer/myskin/style.css
                    skin: 'layer-ext-yourskin'          //一旦設定，所有layer彈層風格都采用此主題。      
                });

 

2.如果只是單個指定的layer設置皮膚樣式,我們其實可以設置多個不同的風格樣式的文件，在各種單獨的Layer上進行配置

點擊按鈕顯示成績部分Layer

      self.elems.$js_ShowGradeModal.click(function () {
            layui.use('layer', function () {
                var layer = layui.layer;

                layer.config({
                    extend: 'myskin/style1.css',
                })

                layer.open({
                    title: '管理成績信息',          //設置模態框的標題
                    shade: 0,                        //關閉空格產生的遮擋罩層冒泡事件
                    type: 1,                        //樣式風格設置為1
                    maxWidth: 'auto',               //設置寬度為自適應
                    maxmin: 'true',                  //可以最大化最小化
                    content: $('#ModalGrade')
                    ,skin: 'layer-ext-yourskin'          //僅限於單個模態框的使用     
                });
            });
        })

 點擊按鈕顯示課程部分Layer

        self.elems.$js_ShowCourseModal.click(function () {
            layui.use('layer', function () {
                var layer = layui.layer;

                layer.config({
                    extend: 'myskin/style.css',
                })

                layer.open({
                    title: '管理課程信息',          //設置模態框的標題
                    shade: 0,                        //關閉空格產生的遮擋罩層冒泡事件
                    type: 1,                        //樣式風格設置為1
                    maxWidth: 'auto',               //設置寬度為自適應
                    maxmin: 'true',                  //可以最大化最小化
                    content: $('#ModalCourse')
                    , skin: 'layer-ext-yourskin'          //僅限於單個模態框的使用     
                });
            });
        })