自定義實現js的confirm方法

時間 2019-12-05

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <style type="text/css">
   /*水平垂直都居中*/
       .ctmd{
           display: -webkit-box;
           -webkit-box-orient: horizontal;
           -webkit-box-pack: center;
           -webkit-box-align: center;
           display: -moz-box;
           -moz-box-orient: horizontal;
           -moz-box-pack: center;
           -moz-box-align: center;
           display: -o-box;
           -o-box-orient: horizontal;
           -o-box-pack: center;
           -o-box-align: center;
           display: -ms-box;
           -ms-box-orient: horizontal;
           -ms-box-pack: center;
           -ms-box-align: center;
           display: box;
           box-orient: horizontal;
           box-pack: center;
           box-align: center;
       }
       /*彈出信息*/
       #confirm{
           display:block;
           position: absolute;
       top: 0px;
       left: 0px;
       width: 100%;
       height: 100%;
       background: rgba(255,255,255,0.4);
       z-index: 100;
       }
       #confirm .confirmdiv{
           width:100%;
           height: 100%;
       }
       #confirm .confirms{
           border-radius: 5px;
       /* color: #fff;
       width: 200px;*/
       padding: 10px;
       /* height: 100px; */
       background: rgba(19, 48, 78,0.8);
       border: 1px solid rgba(19, 48, 78 ,0.8);
       }
       #confirm .confirms p{
           text-align:center;
           color:#fff;
           font-size: 1.8rem;
       }
       #confirm .confirms p button.sure{
           background: #69B169;
       padding: 8px 12px;
       margin-left: 2rem;
       }
       #confirm .confirms p button.sure:hover{
           background: #49AD49;
           color:#fff;
       }
       #confirm .confirms p button.not{
       padding: 8px 12px;
       color:#626262;
       }
       #confirm .confirms p button.not:hover{
       background: #ccc;
           color:#626262;
       }
   </style>
</head>
<body>
   <div class="div2 border">
       <div class="div1">
           <div class="div3">
               <button class="btn" onclick="Romover()">點擊</button>
           </div>
       </div>
   </div>
   <div class="div1 border">
   </div>
       <script src="common/js/jquery-3.0.0.min.js"></script>
   <script type="text/javascript">
   /*刪除產品*/
   function Romover(){
       var r=confirm("您肯定要刪除嗎？", function(){
           alert("你點了肯定");
       }, function(){
           alert("你點了取消");
       });
   }
   /*頁面彈出的提示信息*/
       function confirm(test,okCallback, cancleCallback){
           if(document.getElementById('confirm')) return false;
           var div = document.createElement('div');
           div.id = 'confirm';
           div.innerHTML = '<div class="confirmdiv ctmd"><div class="confirms"><p>'+test+'</p>'+
                           '<p><button class="btn not pull-left">取消</button>'+
                           '<button class="btn sure pull-right">確認</button></p></div></div>';
           document.body.appendChild(div);
           $("body #confirm button.sure").on('click',function(){
               document.getElementById('confirm') && document.body.removeChild(document.getElementById('confirm'));
               console.log("msg=true");
               okCallback();
           });
           $("body #confirm button.not").on('click',function(){
               document.getElementById('confirm') && document.body.removeChild(document.getElementById('confirm'));
               console.log("msg=false");
               cancleCallback();
           });
       }
   </script>
</body>
</html>javascript

在confirm（test，okCallback, cancleCallback）方法中，okCallback函數爲點擊確認後執行的函數，cancleCallback函數爲點擊取消後執行的函數。css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。