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. Industrial Nim

    http://codeforces.com/contest/15/problem/C 题意: 现有n个采石场,第i个采石场有mi堆石子 各堆分别有xi,xi+1……,xi+m-1颗石子 两名选手使用最 ...

  2. Maven学习总结(1)——Maven入门

    Maven学习总结(一)--Maven入门 一.Maven的基本概念 Maven(翻译为"专家","内行")是跨平台的项目管理工具.主要服务于基于Java平台的 ...

  3. ansible common modules

    ##Some common modules[cloud modules] [clustering modules] [command modules]command - executes a comm ...

  4. poj 1273最大流dinic算法模板

    #include<stdio.h> #include<string.h> #define N 300 #define inf 0x7fffffff #include<qu ...

  5. centos7安装opennms-17.0.0

    https://blog.csdn.net/jiangzhexi/article/details/52036858 http://www.jb51.net/os/RedHat/281470.html

  6. F - Goldbach`s Conjecture kuangbin 基础数论

    Goldbach's conjecture is one of the oldest unsolved problems in number theory and in all of mathemat ...

  7. ZPush--基于netty4实现的苹果通知推送服务(APNs)Javaclient

    简单说下实现苹果通知推送服务(APNs)client的一些要注意的地方: 使用长连接: sanboxserver是无用的,调试时直接用"gateway.push.apple.com" ...

  8. objective-c中@class和#import

    objective-c中@class和#import #import "B.h" @interface A :NSObject { B *b; } @end @class 通常引入 ...

  9. android 通用菜单条实现(一)

    一.前言介绍 直奔主题啦,非常多Android app都有菜单条.菜单条除了背景图片.图标的不同外,布局基本一致.大致能够分为三部分:菜单条的左側区域.菜单条中间区域.菜单条右側区域. 为了考虑代码的 ...

  10. 通过telent、php深入了解http协议

    HTTP协议:简单点就是client怎么问.server如何答. 重要性:webservice 还是rest做大型架构都离不开对http协议的认识,甚至能够简化的说webservice =  http ...