layer彈出層擴充套件自定義樣式
阿新 • • 發佈：2019-01-07
layer是一款近年來備受青睞的web彈層元件，她具備全方位的解決方案，致力於服務各水平段的開發人員，您的頁面會輕鬆地擁有豐富友好的操作體驗。
layer 擴充套件面板: http://layer.layui.com/skin.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layer彈出層擴充套件自定義樣式</title> <!-- 擴充套件的自定義樣式 --> <link rel="stylesheet" href="../css/layerStyleExtend.css" /> </head> <body> <!-- jquery --> <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script> <!-- leyer --> <script type="text/javascript" src="../js/plugins/layer/layer.min.js" ></script> <script type="text/javascript" src="../js/base.js" ></script> <script> //這兩個彈框的樣式相同 layer.alert('layer擴充套件樣式'); //layer.alert('layer擴充套件樣式2',{skin: 'layer-ext-fo'}); </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layer彈出層擴充套件自定義樣式</title> <!-- 擴充套件的自定義樣式 --> <link rel="stylesheet" href="../css/layerStyleExtend.css" /> </head> <body> <!-- jquery --> <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script> <!-- leyer --> <script type="text/javascript" src="../js/plugins/layer/layer.min.js" ></script> <script type="text/javascript" src="../js/base.js" ></script> <script> //這兩個彈框的樣式相同 layer.alert('layer擴充套件樣式'); //layer.alert('layer擴充套件樣式2',{skin: 'layer-ext-fo'}); </script> </body> </html>
layerStyleExtend.css
/**
* layer彈層風格擴充套件，放在檔案最前面
*/
body .layer-ext-fo .layui-layer-title{
background-color: tomato;
color: #fff;
}
body .layer-ext-fo .layui-layer-btn a{
border-color: brown;
background-color: tomato;
color: #fff;
}
base.js
/** * layer彈層風格擴充套件，放在檔案最前面 */ parent.layer.config({ extend: 'fo/style.css', //extend載入新的樣式 skin: 'layer-ext-fo' //設定樣式，所有彈層風格都採用此主題。 }); //基礎公用程式碼 //建立模組 //var app=angular.module("myApp", []);
