1.下载并引用js,

官网http://layer.layui.com/

文档http://www.layui.com/doc/modules/layer.html

<link href="~/Scripts/layer/layer.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/layer/layer.js"></script>

2.自定义样式

<style>
<!--样式1-->
body .demo-class {
background: url(/images/draw/pc_cj_open1.png) no-repeat;
border: none;
} body .demo-class .layui-layer-content {
padding: 3rem 3rem 0 3rem;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
height: 1px;
} body .demo-class .layui-layer-btn {
margin-top: 0rem;
} body .demo-class .layui-layer-btn a {
background: #ff6a00;
border: 0px;
} body .demo-class .layui-layer-btn .layui-layer-btn1 {
background: #afb611;
border: 0px;
}
<!--样式2-->
body .winning-class {
background: url(/images/draw/pc_cj_open3.png) no-repeat;
border: none;
} body .winning-class .layui-layer-content {
padding: 5rem 3rem 2rem 3rem;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
height: 1px;
} body .winning-class .layui-layer-btn {
margin-top: 1rem;
} body .winning-class .layui-layer-btn a {
background: #ff6a00;
border: 0px;
} body .winning-class .layui-layer-btn .layui-layer-btn1 {
background: #afb611;
border: 0px;
}
</style>

3.调用

<script>
//全局样式
layer.config({
skin: 'demo-class'//自定义样式demo-class
})
//当没有定义skin时使用的是全局样式
layer.confirm('提示信息123', {
title:false,
btnAlign: 'c',
area: ['20rem', '12rem'],
btn: ['确定抽奖', '关闭'] //按钮
}, function(index){
layer.close(index);
StartGame();
}); layer.msg('提示信息123123', {
skin:'winning-class',//自定义样式winning-class
time:0,
title:false,
btnAlign: 'c',
area: ['20rem', '12rem']
, btn: ['确定']
, yes: function (index) {
layer.close(index);
window.location.href=window.location.href;
}
});
</script>

好文要顶呀,兄弟们

layer自定义弹窗样式的更多相关文章

  1. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  2. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

  3. ionic2\ionic3 自定义弹窗

    ionic2及ionic3没有了popup及 其templateUrl属性 那我们如何对弹窗里加入自定义元素 从而达到自定义弹窗样式 那么就可以通过写h5页面来实现 自定义弹窗效果: 写个H5的弹窗及 ...

  4. svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件

    基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...

  5. js实现自定义弹窗

    众所周知,浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等.前段时间在慕课网上看到了一个自定义弹窗的实现,自己顺便就学习尝试 ...

  6. 使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

    ------------------------------------------20180410补充------------------------------------------------ ...

  7. 基于JQ的自定义弹窗组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 转 layer的Icon样式以及一些常用的layer窗口使用

    转载地址:http://blog.csdn.net/beauxie/article/details/60959971 本文搜集的是本人在实际开发中所用到的layer窗口,未用到的layer按钮,请参考 ...

  9. ExtJs基础知识总结:自定义弹窗和ComboBox自动联想加载(四)

    概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌 ...

随机推荐

  1. 清北学堂模拟赛d6t4 数组异或

    分析:直接O(n^3)做是只有50分的,可以加一点小小的优化,就是c[k]可以从c[k-1]得到,但是还是只有60分,从宏观意义上是不能继续优化了.对于这类涉及到位运算的性质的题目,将每个数转化成二进 ...

  2. Sencha Touch中 xclass和xtype区别

    1.xclass 就是 Ext.create(xclass) 和 xtype一样的性质,不一定非要是自己创建的. 2.xtype是xclass的简称. 3.使用xtype前,你要new的对象,先要re ...

  3. [cogs396] [网络流24题#4] 魔术球 [网络流,最大流,最小路径覆盖]

    本题枚举每多一个球需要多少个柱子,可以边加边边计算,每次只需要判断$i-Dinic()$即可:特别注意边界. #include <iostream> #include <algori ...

  4. java如何实现替换指定位置的指定字符串的功能

    /**  * @创建日期 2013-07-15  * @创建时间 14:25:59  * @版本号 V 1.0  */ public class CosTest {     public static ...

  5. 网络基础篇(一)--TCP/IP协议族

    TCP/IP协议族是一个分层,多协议通信体系. 1 TCP/IP协议族体系结构 TCP/IP协议族自底而上分为四层: 数据链路层, 网络层, 传输层和应用层. 1.1 数据链路层 实现网卡接口的网络驱 ...

  6. 您必须先调用“WebSecurity.InitializeDatabaseConnection”方法。。。

    有如下代码: [Authorize] public ActionResult Index() { ViewBag.ShowList = ShowList.GetShowList(WebSecurity ...

  7. pattern matching is C# 7.0

    https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/is 原来的版本 private static s ...

  8. hdu1533 费用流模板

    Going Home Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  9. bzoj2503 相框——思路

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2503 思路题: 首先,这种问题应该注意到答案只跟度数有关,跟其他什么连接方法之类的完全无关: ...

  10. python使用MySQLdb向mySQL批量插入数据的方法

    该功能通过调用mySQLdb python库中的 cursor.executemany()函数完成批量处理. 今天用这个函数完成了批量插入 例程: def test_insertDB(options) ...