JS（JavaScript）弹框提示和确认提示

瓦力^o
JavaScript
2024-07-21
218热度
0评论
涉及到前后端交互，需要有一个弹框提示和一个确认弹框的提示，当然使用浏览器的 alert 和 confirm 就能够解决这个问题
效果：
1、提示框：
2、确认框：
JS（JavaScript）弹框提示和确认提示
具体代码示例：
<!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 12px 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="btn-item confirm">'+(obj.confirmText ? obj.confirmText : '确定')+'</div>';
  var cancelStr = '<div class="btn-item cancel">'+(obj.cancelText ? obj.cancelText : '取消')+'</div>';
  var str = '<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">'+ (obj.confirmText ? confirmStr : '') + (obj.cancelText ? cancelStr : '') +'</div>'+
  '</div>';
  $(".main-confirm").remove();
  $("body").append(str);
  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>