如何利用原生js簡單封裝confirm彈出框

來源：懂視網責編：小采時間：2020-11-27 19:27:48

如何利用原生js簡單封裝confirm彈出框

如何利用原生js簡單封裝confirm彈出框:由于項目需要，做了一個超級簡單的彈出框，一打開頁面就彈出彈出框。由于項目總監說要盡量小（少引入封裝的文件包），所以采用原生js（發現網上基本上都是用jQuery做的），話不多說，上代碼吧<!DOCTYPE html> <head> <meta

推薦度：

點擊下載本文 文檔為doc格式

導讀如何利用原生js簡單封裝confirm彈出框:由于項目需要，做了一個超級簡單的彈出框，一打開頁面就彈出彈出框。由于項目總監說要盡量小（少引入封裝的文件包），所以采用原生js（發現網上基本上都是用jQuery做的），話不多說，上代碼吧<!DOCTYPE html> <head> <meta

由于項目需要，做了一個超級簡單的彈出框，一打開頁面就彈出彈出框。由于項目總監說要盡量小（少引入封裝的文件包），所以采用原生js（發現網上基本上都是用jQuery做的），話不多說，上代碼吧

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>登錄確定提醒</title>
 <style>
 html,
 body {
 margin: 0;
 padding: 0;
 font-family: "微軟雅黑";
 }
 .wrap-dialog {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 font-size: 16px;
 text-align: center;
 background-color: rgba(0, 0, 0, .7);
 z-index: 999;
 }
 .dialog {
 top: 0;
 left: 0;
 position: relative;
 /*margin: 10% auto;*/
 width: 300px;
 background-color: #FFFFFF;
 border-radius: 2px;
 }
 .dialog .dialog-header {
 height: 20px;
 padding: 10px;
 background-color: #F8F8F8;
 border-bottom: 1px solid #eee;
 text-align: left;
 }
 .dialog-title{
 display: inline-block;
 width: 50px;
 margin-left: 0;
 }
 .dialog .dialog-body {
 height: 30px;
 padding: 20px;
 }
 .dialog .dialog-footer {
 padding: 8px;
 background-color: #f5f5f5;
 }
 .dialog-btn {
 cursor: pointer;
 background: #ff5622;
 border: 1px solid #ff5622;
 border-radius: 2px;
 color: #fff;
 height: 28px;
 line-height: 28px;
 margin: 5px 5px 0;
 padding:0 25px;
 } 
 .dialog-hide {
 display: none;
 }
 .dialog-ml50 {
 margin-left: 50px;
 background: #fcfbfc;
 color: #000;
 border: 1px solid #dedede;
 }
 .closeBtn{
 display: inline-block;
 width: 20px;
 height: 20px;
 padding: 10px;
 line-height: 20px;
 text-align: center;
 /*background: red;*/
 color: #333;
 font-size: 12px;
 float: right;
 cursor:pointer;
 font-weight: bolder;
 }
 .closeBtn:hover{
 color: #A0A8B4;
 }
 </style>
</head>
<body>
 <div class="wrap-dialog dialog-hide" id="dialog-hide"> 
 <div class="dialog" id="dialog"> 
 <a class="closeBtn" id="closeBtn">X</a>
 <div class="dialog-header">
 <span class="dialog-title">提示</span> 
 </div>
 <div class="dialog-body">
 <span class="dialog-message" id="dialog-message">是否要退出登錄？</span>
 </div>
 <div class="dialog-footer">
 <input type="button" class="dialog-btn" id="dialog-confirm" value="是" />
 <input type="button" class="dialog-btn dialog-ml50" id="dialog-cancel" value="否" />
 </div>
 </div>
 </div>
</body>
<script>
 window.onload=function(){
 var choose=function(id){
 return document.getElementById(id);
 }
 //自定義部分
 window.confirm = function(message, yesCallBack, noCallBack) {
 var message = message || "是否要退出登錄?";
 choose("dialog-message").innerHTML = message;
 // 顯示遮罩和對話框
 choose("dialog-hide").className = "wrap-dialog";
 // 確定按鈕
 choose("dialog").onclick= function(e){
 if(e.target.className=="dialog-btn"){
 choose("dialog-hide").className = "wrap-dialog dialog-hide";
 yesCallBack();
 }else if (e.target.className=="dialog-btn dialog-ml50"){
 choose("dialog-hide").className = "wrap-dialog dialog-hide";
 noCallBack();
 }
 };
 // 取消按鈕
 choose("closeBtn").onclick = function(){
 choose("dialog-hide").style.display = "none";
 }
 }
 function submitHand(){
 function submitBtn() {
 alert("確定");
 }
 function closeBtn() {
 alert("取消");
 }
 confirm("確認登錄？", submitBtn, closeBtn);
 }
 //頁面打開自動彈出 
 submitHand();
}
</script>
</html>

實現效果：

微信截圖_20190121131248.png