1 Star 0 Fork 33

pywu/notify

forked from liuyu/notify 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
demo_layui.html 15.99 KB
一键复制 编辑 原始数据 按行查看 历史
liuyu 提交于 2023-04-07 18:30 . 优化配色
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script src="notify.js"></script>
<style>
body {
text-align: center;
}
.msgBox {
box-shadow: 0PX 10PX 30px 5PX rgba(0, 0, 0, 0.1);
background: #fff;
width: 1000px;
height: 500px;
margin: auto;
padding: 50px;
}
</style>
<style>
[class|=notify], [class|=notify]::after, [class|=notify]::before {
box-sizing: border-box;
outline: 0
}
.notify-msg-progress {
width: 13px;
height: 13px
}
.notify-msg__circle {
stroke-width: 2;
stroke-linecap: square;
fill: none;
transform: rotate(-90deg);
transform-origin: center
}
.notify-msg-stage:hover .notify-msg__circle {
-webkit-animation-play-state: paused !important;
animation-play-state: paused !important
}
.notify-msg__background {
stroke-width: 2;
fill: none
}
.notify-msg-stage {
position: fixed;
width: auto;
z-index: 99891015
}
.topLeft {
top: 20px;
left: 20px
}
.topCenter {
top: 20px;
left: 50%;
transform: translate(-50%, 0)
}
.topRight {
top: 20px;
right: 20px
}
.bottomLeft {
bottom: 20px;
left: 20px
}
.bottomCenter {
bottom: 20px;
left: 50%;
transform: translate(-50%, 0)
}
.bottomRight {
bottom: 20px;
right: 20px
}
.vcenter {
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.notify-msg-wrapper {
position: relative;
left: 50%;
transform: translate(-50%, 0);
transform: translate3d(-50%, 0, 0);
transition: height .3s ease, padding .3s ease;
padding: 6px 0;
will-change: transform, opacity
}
.notify-msg {
padding: 15px 21px;
border-radius: 3px;
position: relative;
left: 50%;
transform: translate(-50%, 0);
transform: translate3d(-50%, 0, 0);
display: flex;
align-items: center
}
.notify-msg-content, .notify-msg-icon, .notify-msg-wait {
display: inline-block
}
.notify-msg-icon {
position: relative;
width: 13px;
height: 13px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center
}
.notify-msg-icon svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 11px;
height: 11px
}
.notify-msg-wait {
width: 20px;
height: 20px;
position: relative;
fill: #4eb127
}
.notify-msg-wait svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.notify-msg-close {
width: 14px;
height: 14px
}
.notify-msg-content {
margin: 0 10px;
min-width: 240px;
text-align: left;
font-size: 14px;
font-weight: 500;
font-family: -apple-system, Microsoft Yahei, sans-serif;
text-shadow: 0 0 1px rgba(0, 0, 0, .01)
}
.notify-msg.notify-msg-info {
color: #0c5460;
background-color: #d1ecf1;
box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #bee5eb
}
.notify-msg.notify-msg-info .notify-msg-icon {
background-color: #1d96aa
}
.notify-msg.notify-msg-success {
color: #155724;
background-color: #d4edda;
box-shadow: 0 0 2px 0 rgba(0, 1, 0, .01), 0 0 0 1px #c3e6cb
}
.notify-msg.notify-msg-success .notify-msg-icon {
background-color: #4ebb23
}
.notify-msg.notify-msg-warning {
color: #856404;
background-color: #fff3cd;
box-shadow: 0 0 2px 0 rgba(1, 1, 0, .01), 0 0 0 1px #ffeeba
}
.notify-msg.notify-msg-warning .notify-msg-icon {
background-color: #f1b306
}
.notify-msg.notify-msg-error {
color: #721c24;
background-color: #f8d7da;
box-shadow: 0 0 2px 0 rgba(1, 0, 0, .01), 0 0 0 1px #f5c6cb
}
.notify-msg.notify-msg-error .notify-msg-icon {
background-color: #f34b51
}
.notify-msg.notify-msg-loading {
color: #0fafad;
background-color: #e7fdfc;
box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c2faf9
}
.notify-msg_loading {
flex-shrink: 0;
width: 20px;
height: 20px;
position: relative
}
.notify-msg-circular {
-webkit-animation: notify-msg-rotate 2s linear infinite both;
animation: notify-msg-rotate 2s linear infinite both;
transform-origin: center center;
height: 18px !important;
width: 18px !important
}
.notify-msg-path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke: #0fafad;
-webkit-animation: notify-msg-dash 1.5s ease-in-out infinite;
animation: notify-msg-dash 1.5s ease-in-out infinite;
stroke-linecap: round
}
@-webkit-keyframes notify-msg-rotate {
100% {
transform: translate(-50%, -50%) rotate(360deg)
}
}
@keyframes notify-msg-rotate {
100% {
transform: translate(-50%, -50%) rotate(360deg)
}
}
@-webkit-keyframes notify-msg-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px
}
}
@keyframes notify-msg-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px
}
}
.notify-msg.notify-msg-info .notify-msg-wait {
fill: #0fafad
}
.notify-msg.notify-msg-success .notify-msg-wait {
fill: #4ebb23
}
.notify-msg.notify-msg-warning .notify-msg-wait {
fill: #f1b306
}
.notify-msg.notify-msg-error .notify-msg-wait {
fill: #f34b51
}
.notify-msg.notify-msg-loading .notify-msg-wait {
fill: #0fafad
}
.notify-msg.notify-msg-alert .notify-msg-wait {
fill: #999
}
.notify-msg.notify-msg-alert .notify-msg-content, .notify-msg.notify-msg-confirm .notify-msg-content {
font-size: 18px
}
.notify-msg.notify-msg-alert .notify-msg-wait {
display: block;
width: 100px;
height: auto;
margin: auto;
margin-top: 30px
}
.notify-msg.notify-msg-confirm .notify-msg-wait {
display: inline-block;
width: 100px;
height: auto;
margin: auto
}
.notify-msg.notify-msg-confirm .notify-msg-content {
display: block;
margin-bottom: 30px
}
.notify-msg.notify-msg-alert .notify-msg-wait .btnOk, .notify-msg.notify-msg-confirm .notify-msg-wait .btnOk {
line-height: 30px;
border-radius: 4px;
background-color: #0069d9;
border: 1px solid #0062cc;
color: #fff;
width: 100px;
cursor: pointer
}
.notify-msg.notify-msg-confirm .btnCancel {
line-height: 30px;
border-radius: 4px;
background-color: #fff;
border: 1px solid #ddd;
color: #666;
width: 100px;
cursor: pointer;
margin-left: 6px
}
.notify-msg-pointer {
cursor: pointer
}
@-webkit-keyframes notify-msg_info {
0% {
stroke: #0fafad
}
to {
stroke: #0fafad;
stroke-dasharray: 0 100
}
}
@keyframes notify-msg_info {
0% {
stroke: #0fafad
}
to {
stroke: #0fafad;
stroke-dasharray: 0 100
}
}
@-webkit-keyframes notify-msg_success {
0% {
stroke: #4eb127
}
to {
stroke: #4eb127;
stroke-dasharray: 0 100
}
}
@keyframes notify-msg_success {
0% {
stroke: #4eb127
}
to {
stroke: #4eb127;
stroke-dasharray: 0 100
}
}
@-webkit-keyframes notify-msg_warning {
0% {
stroke: #fcbc0b
}
to {
stroke: #fcbc0b;
stroke-dasharray: 0 100
}
}
@keyframes notify-msg_warning {
0% {
stroke: #fcbc0b
}
to {
stroke: #fcbc0b;
stroke-dasharray: 0 100
}
}
@-webkit-keyframes notify-msg_error {
0% {
stroke: #eb262d
}
to {
stroke: #eb262d;
stroke-dasharray: 0 100
}
}
@keyframes notify-msg_error {
0% {
stroke: #eb262d
}
to {
stroke: #eb262d;
stroke-dasharray: 0 100
}
}
.notify-msg-fade-in {
-webkit-animation: notify-msg-fade .2s ease-out both;
animation: notify-msg-fade .2s ease-out both
}
.notify-msg-fade-out {
animation: notify-msg-fade .3s linear reverse both
}
@-webkit-keyframes notify-msg-fade {
0% {
opacity: 0;
transform: translate(-50%, 0);
transform: translate3d(-50%, -80%, 0)
}
to {
opacity: 1;
transform: translate(-50%, 0);
transform: translate3d(-50%, 0, 0)
}
}
@keyframes notify-msg-fade {
0% {
opacity: 0;
transform: translate(-50%, 0);
transform: translate3d(-50%, -80%, 0)
}
to {
opacity: 1;
transform: translate(-50%, 0);
transform: translate3d(-50%, 0, 0)
}
}
.notify-msg-fade-in-b {
-webkit-animation: notify-msg-fade-b .2s ease-out both;
animation: notify-msg-fade-b .2s ease-out both
}
.notify-msg-fade-out-b {
animation: notify-msg-fade-b .3s linear reverse both
}
@-webkit-keyframes notify-msg-fade-b {
0% {
opacity: 0;
transform: translate(-50%, 0);
transform: translate3d(-50%, 80%, 0)
}
to {
opacity: 1;
transform: translate(-50%, 0);
transform: translate3d(-50%, 0, 0)
}
}
@keyframes notify-msg-fade-b {
0% {
opacity: 0;
transform: translate(-50%, 0);
transform: translate3d(-50%, 80%, 0)
}
to {
opacity: 1;
transform: translate(-50%, 0);
transform: translate3d(-50%, 0%, 0)
}
}
.notify-msg.notify-msg-alert, .notify-msg.notify-msg-confirm {
display: block;
box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
background-color: #fff;
border: 1px solid #ccc
}
.bounceIn, .bounceOut {
-webkit-animation-duration: .45s;
-moz-animation-duration: .45s;
-o-animation-duration: .45s;
animation-duration: .45s
}
@keyframes bounceIn {
0% {
opacity: 0;
filter: alpha(opacity=0)
}
100% {
opacity: 1;
filter: alpha(opacity=100)
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn
}
@keyframes bounceOut {
0% {
opacity: 1;
filter: alpha(opacity=100)
}
100% {
opacity: 0;
filter: alpha(opacity=0)
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
-moz-animation-name: bounceOut;
-o-animation-name: bounceOut;
animation-name: bounceOut
}
.notify-none {
display: none
}
.notify-modal {
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
position: fixed;
transition: height .3s ease, padding .3s ease
}
</style>
</head>
<body>
<h1>演示</h1>
<div class="msgBox" id="msgBox">
<button id="info">提示</button>
<button id="warning">警告</button>
<button id="success">成功</button>
<button id="error">错误</button>
<button id="loading">加载</button>
<button id="noclose">不显示关闭按钮</button>
<button id="close">关闭时回调</button>
<button id="destroyAll">关闭全部</button>
<button id="topLeft">左上</button>
<button id="topRight">右上</button>
<button id="bottomLeft">左下</button>
<button id="bottomCenter">中下</button>
<button id="bottomRight">右下</button>
<button id="vcenter">正中间</button>
<p>
<button id="pos">指定ID/CLASS为弹出位置</button>
<button id="alert">警告框</button>
<button id="confirm">确认框</button>
<pre style="text-align: left;line-height: 26px;width:900px;margin: auto;padding-top:20px;">
1、notify.info("提示消息");
2、notify.warning("警告消息");
3、notify.success("成功消息");
4、notify.loading("加载中");
5、notify.error("失败消息");
6、notify.info("不显示关闭按钮", false);
7、notify.warning("提示消息", function () {
alert("回调成功");
});
8、notify.destroyAll(); //全部关闭
9、notify.success("指定位置显示","#msgBox", "topLeft"); //参数:topLeft、topCenter、topRight、bottomLeft、bottomCenter、bottomRight、vcenter
10、notify.alert("模态框", "vcenter","shadow"); //参数:shadow 显示遮罩
11、notify.confirm("确认框", "vcenter","shadow",function(){
alert("回调方法")
}); //参数:shadow 显示遮罩 、function 确定后回调方法
</pre>
</p>
</div>
<script>
layui.use(['notify'], function() {
var notify = layui.notify;
var j = 1;
document.getElementById("info").onclick = function() {
notify.info("提示消息 " + j++);
};
document.getElementById("warning").onclick = function() {
notify.warning("警告消息 " + j++);
}
document.getElementById("success").onclick = function() {
notify.success("操作成功 " + j++);
}
document.getElementById("loading").onclick = function() {
notify.loading("加载中,不会自动关闭 " + j++);
}
document.getElementById("error").onclick = function() {
notify.error("操作失败 " + j++);
}
document.getElementById("noclose").onclick = function() {
notify.error("不显示关闭按钮 " + j++, false);
}
document.getElementById("close").onclick = function() {
notify.info("提示消息 " + j++, function() {
alert("回调成功");
});
};
document.getElementById("destroyAll").onclick = function() {
notify.destroyAll();
j = 1
}
document.getElementById("topLeft").onclick = function() {
notify.info("左上 " + j++, "topLeft");
}
document.getElementById("topRight").onclick = function() {
notify.info("右上 " + j++, "topRight");
}
document.getElementById("bottomLeft").onclick = function() {
notify.info("左下 " + j++, "bottomLeft");
}
document.getElementById("bottomRight").onclick = function() {
notify.info("右下 " + j++, "bottomRight");
}
document.getElementById("bottomCenter").onclick = function() {
notify.info("中下 " + j++, "bottomCenter");
}
document.getElementById("vcenter").onclick = function() {
notify.info("正中 " + j++, "vcenter");
}
document.getElementById("pos").onclick = function() {
notify.info("指定位置提示消息 " + j++, "#msgBox");
}
document.getElementById("alert").onclick = function() {
notify.alert("请输入内容" + j++, "vcenter", "shadow");
}
document.getElementById("confirm").onclick = function() {
notify.confirm("确定要删除么" + j++, "vcenter", "shadow", function() {
alert("回调方法")
});
}
})
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/pywu/notify.git
git@gitee.com:pywu/notify.git
pywu
notify
notify
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385