layer弹窗倒计时可点击效果
2019-11-27 本文已影响0人
KevinLee0424
话不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layer</title>
<style>
body .double-record{
border-radius: 10px;
}
body .double-record .layui-layer-content{
padding: 22px 16px 0px;
}
body .double-record .cont{
color: #151515;
font-size: 15px;
line-height: 26px;
}
body .double-record .cont .Time{
width: 137px;
height: 50px;
text-align: center;
line-height: 50px;
color: #7f7f7f;
background: #dcdcdc;
font-size: 17px;
border-radius: 5px;
margin: 15px auto 0px;
}
body .double-record .layui-layer-btn{
border-top:none;
font-size: 17px;
text-align: center;
}
body .double-record .layui-layer-btn .layui-layer-btn0{
width: 137px;
height: 50px;
line-height: 50px;
color: #fff;
background: #ff776c;
border:none;
border-radius: 5px;
display: none;
margin: 0 auto;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
function func1() {
var i = 9;
var interval;
layer.confirm('是否提交？', {
btn: [i+1+'s后可提交','退出'], //按钮
skin: 'layui-layer-molv',
success: function(a,b){
$(".layui-layer-btn0").css("backgroundColor","#92B8B1");
var fn = function() {
//layer.title(i+' 秒后，系统将自动退出并关闭。',b);
$(".layui-layer-btn0").text(i+'s后可提交');
i--;
};
interval = setInterval(function(){
fn();
if(i === 0){
$(".layui-layer-btn0").css("backgroundColor","#019F95");
$(".layui-layer-btn0").text('提交');
clearInterval(interval);
}
}, 1000);
},end:function(){
clearInterval(interval);
}
}, function(){
if(i<=0) {
layer.msg('已提交', {icon: 1});
}
}, function(){
clearInterval(interval);
layer.msg('已关闭', {icon: 1});
});
}
// 假如只有一个按钮 按钮通过CSS先隐藏掉
function funsingle(){
var second = 10;
var interval;
layer.open({
skin: 'double-record',
title: false,
area: ['80%', ''],
closeBtn: 0,
content: '<div class="cont"><div>尊敬的客户，您好！</div><div style="text-indent: 2em;">的方式结合等方式尽快返回</div><div style="text-indent: 2em;">感谢您的信任与配合!</div><div class="Time">'+second+'S后可操作'+'</div></div>',
btn: ['确认'],
success: function(a,b){
var fn = function() {
$(".layui-layer-btn0").hide();
$(".Time").text((second-1)+'S后可操作');
second--;
};
interval = setInterval(function(){
fn();
if(second === 0){
$(".Time").hide();
$(".layui-layer-content").css('padding','22px 16px 14px');
$(".layui-layer-btn0").css('display','block');
clearInterval(interval);
}
}, 1000);
},end:function(){
clearInterval(interval);
},
yes: function(index) {
layer.close(index);
console.log('111');
}
});
};
</script>
<button id="func1" onclick="func1();">询问框</button>
<button id="funsingle" onclick="funsingle();">确定框</button>
</body>
</html>
