最近在开发PC端项目的时候，涉及到前后端交互，需要有一个弹框提示和一个确认弹框的提示，当然使用浏览器的 alert 和 confirm 就能够解决这个问题，但是这个的样式太丑了，不好看，考虑到其复用性，所以自己动手做了一个。
效果：
1、提示框：
2、确认框：
具体代码示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>提示&弹框确认</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.main-header{width: 100%; text-align: center; font-size: 24px; font-weight: bold; margin: 50px auto 0;}
.main-action{width: 800px; overflow: hidden; margin: 50px auto 0;}
.main-action .btn{width: 140px; height: 60px; line-height: 60px; font-size: 16px; text-align: center; float: left; background: #409EFF; color: #fff; margin: 0 15px 15px 0; cursor: pointer;}
/**/
.main-tips{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 500;}
.main-tips .tips-message{position: fixed; top: 40%; left: 50%; background: rgba(0,0,0,0.7); height: 35px; line-height: 35px; font-size: 15px; color: #fff; padding: 0 10px; border-radius: 4px; overflow: hidden; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
/**/
.main-confirm{width: 300px; height: 170px; position: fixed; top: calc(40% - 95px); left: calc(50% - 150px); border-radius: 3px; overflow: hidden; box-shadow: 1px 1px 50px rgb(0 0 0 / 30%); display: none;}
.main-confirm .confirm-title{padding: 0 15px; height: 45px; line-height: 45px; font-size: 15px; border-bottom: 1px solid #eee;}
.main-confirm .confirm-content{padding: 20px 15px 10px; height: 40px;}
.main-confirm .confirm-btn{padding: 0 15px; overflow: hidden;}
.main-confirm .confirm-btn .btn-item{min-width: 75px; height: 30px; line-height: 30px; background: #fff; border: 1px solid #dedede; border-radius: 2px; font-weight: 400; cursor: pointer; font-size: 14px; color: #333; padding: 0 5px; text-align: center; margin-left: 10px; float: right;}
.main-confirm .confirm-btn .btn-item.confirm{border-color: #409EFF; background: #409EFF; color: #fff;}
</style>
</head>
<body>
<div class="main-header">常见前端样式</div>
<div class="main-action">
<div class="btn tips">提示</div>
<div class="btn confirm">确认框</div>
</div>
<div class="main-confirm">
<div class="confirm-title">提示<i class="icon iconfont icon-no"></i></div>
<div class="confirm-content">请先登录！</div>
<div class="confirm-btn">
<div class="btn-item confirm">立即登录</div>
<div class="btn-item cancel">取消</div>
</div>
</div>
<script type="text/javascript" src="http://www.htmleaf.com/js/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(".tips").click(function(){
tips('我是一个提示框！');
});
$(".confirm").click(function(){
confirms({
title: '提示',
content: '请先登录！',
cancelText: '取消',
confirmText: '立即登录',
confirm: function(){
console.log('confirm');
},
cancel: function(){
console.log('cancel');
}
});
});
</script>
<script type="text/javascript">
// 弹框提示
function tips(msg,time=1000){
$(".main-tips").remove();
$("body").append('<div class="main-tips"><div class="tips-message">'+ msg +'</div></div>');
setTimeout(function(){
$(".main-tips").remove();
},time);
}
// 弹框确认
function confirms(obj){
var random = 'confirm' + parseInt(Math.random() * 1000);
var confirmStr = '<div class="main-confirm '+random+'">'+
'<div class="confirm-title">'+(obj.title ? obj.title : '提示')+'<i class="icon iconfont icon-no"></i></div>'+
'<div class="confirm-content">'+(obj.content ? obj.content : '内容')+'</div>'+
'<div class="confirm-btn">'+
'<div class="btn-item confirm">'+(obj.confirmText ? obj.confirmText : '确定')+'</div>'+
'<div class="btn-item cancel">'+(obj.cancelText ? obj.cancelText : '取消')+'</div>'+
'</div>'+
'</div>';
$(".main-confirm").remove();
$("body").append(confirmStr);
var object = $(".main-confirm."+random);
object.stop(true,true).fadeIn();
object.find(".icon").click(function(){
object.stop(true,true).fadeOut();
object.remove();
obj.cancel();
});
object.find(".btn-item.confirm").click(function(){
object.stop(true,true).fadeOut();
object.remove();
obj.confirm();
});
object.find(".btn-item.cancel").click(function(){
object.stop(true,true).fadeOut();
object.remove();
obj.cancel();
});
}
</script>
</body>
</html>
打完收工！
标签：function,height,obj,confirm,提示,object,弹框,---,main From： https://www.cnblogs.com/e0yu/p/17139509.html