layui中的layer彈出層自定義樣式更改背景
更新時(shí)間：2023年06月17日 10:18:49 投稿：yin
layui中的layer彈出層有很多提示框，但是我們使用最多的應(yīng)該就幾種，layer.msg、layer.alert、layer.open、layer.load等。layer?有內(nèi)置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不僅允許你傳入layer內(nèi)置的樣式class名，可以自定義class名。
layui中的layer彈出層有很多提示框，但是我們使用最多的應(yīng)該就幾種，layer.msg、layer.alert、layer.open、layer.load等。layer有內(nèi)置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不僅允許你傳入layer內(nèi)置的樣式class名，還可以傳入您自定義的class名。如果想要更換想要的樣式，可以選擇自定義skin屬性。
javascript中自定義skin示例
比如layer.open中使用skin，javascript中調(diào)用：
layer.open({
type: 1,
title: '變化詳情',
shadeClose: true,
shade: 0.8,
skin: 'layer_bg', //layer_bg是自定義的css樣式
area: ['1000px', '600px'],
content: html, //html是之前寫好的彈出層html代碼的字符串
});skin: 'layer_bg', //layer_bg是自定義的css樣式
css樣式示例
格式是固定的：'body'+自定義的class名+需要修改的彈出層部分的class名。
layer彈窗頭部樣式
body .layer_bg .layui-layer-title{
background: #ff0000;
color:#fff;
}layer彈窗內(nèi)容樣式
body .layer_bg .layui-layer-content{
background-color: #eaf3fd;
}layer彈窗關(guān)閉按鈕樣式
body .layer_bg .layui-layer-setwin{
color:#fff;
}到此這篇關(guān)于layui中的layer彈出層自定義樣式更改背景的文章就介紹到這了,更多相關(guān)layer彈出層自定義樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一般情況下web項(xiàng)目的瀏覽器下載文件，都是使用form表單或者ajax向后端提交數(shù)據(jù)，發(fā)送請(qǐng)求，后端文件的URL地址或者二進(jìn)制文件流。這篇文章主要介紹了使用JS?的download庫(kù)在瀏覽器直接下載文件。2022-12-12
如今最常用的JavaScript庫(kù)之一是RequireJS。最近我參與的每個(gè)項(xiàng)目，都用到了RequireJS，或者是我向它們推薦了增加RequireJS。在這篇文章中，我將描述RequireJS是什么，以及它的一些基礎(chǔ)場(chǎng)景。 2016-04-04
這篇文章主要介紹了使用three.js 畫漸變的直線的相關(guān)資料以及具體的實(shí)例代碼，有需要的小伙伴可以參考下2016-06-06
typescript類型體操及關(guān)鍵字使用示例詳解
這篇文章主要為大家介紹了typescript類型體操及關(guān)鍵字使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Typescript使用裝飾器實(shí)現(xiàn)接口字段映射與Mock實(shí)例
這篇文章主要為大家介紹了Typescript使用裝飾器實(shí)現(xiàn)接口字段映射與Mock實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
TypeScript 基本數(shù)據(jù)類型實(shí)例詳解
這篇文章主要為大家介紹了TypeScript 基本數(shù)據(jù)類型實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了TypeScript前端上傳文件到MinIO示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
TypeScript學(xué)習(xí)輕松玩轉(zhuǎn)類型操作
這篇文章主要為大家介紹了TypeScript學(xué)習(xí)輕松玩轉(zhuǎn)類型操作，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
正在學(xué)習(xí)Sizzle源碼或有一定前端基礎(chǔ)的同學(xué)們，可以一邊看源碼一邊看這些文章進(jìn)行驗(yàn)證，所以雖然我會(huì)分析源碼中的正則表達(dá)式,有大量的注釋，但不會(huì)講正則表達(dá)式的基本用法！2015-04-04
眾多CSS預(yù)處理器中Less的語(yǔ)法最接近原生CSS，因此相對(duì)來說更容易上手，假如有JS、C#等編程經(jīng)驗(yàn)的話，其實(shí)上述的幾種預(yù)處理器的學(xué)習(xí)成本也不會(huì)特別高。下面是我們這陣子的學(xué)習(xí)筆記，以便日后查閱2017-03-03