最近在開發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>
打完收工！