使用JavaScript实现简单的confirm弹窗效果

阳光穿透心脏的1/2处 2023-03-14 08:23 21阅读 0赞

##### 在实践中，经常遇见需要出现一个confirm弹窗的情况，很多时候都是直接使用现成的UI组件，这些UI组件在样式、功能等具体表现上都很优秀。 #####

##### 长时间下来对于手动实现confirm反而有些生疏了，下面将采用JavaScript实现一个最最基础的confirm功能，虽然实现了基本功能，但是代码还是提升优化的空间,希望可以学习到其他更优的实现方法。 #####

<html>
        <head>
        </head>
        <body>
            <button id="btn1">点击确认</button>
            <script src="confirm.js"></script>
            <script>
                var btn1=document.getElementById("btn1");         
                btn1.onclick=function(){ 
                   // 调用自定义的构造函数Confirm,得到实例confirm
                   var confirm= new Confirm('这是一个confirm弹窗'); 
                   // 确定
                    confirm.okFn(function(){ 
                        console.log("点击了confirm弹窗的确认按钮");
                    })
                    // 取消
                    confirm.cancelFn(function(){ 
                        console.log("点击了confirm弹窗的取消按钮");
                    })                               
                   }                 
            </script>
        </body>
    </html>
    
    
    // confirm.js文件
    
    function Confirm(refs){ 
        var callbackOk;
        var callbackCancel;
    
        this.cancelFn=function(refs){ 
           callbackCancel=refs 
           
        }
        
         this.okFn=function(refs){ 
           callbackOk=refs          
        }
        
        this.create=function(){ 
            var confirmWrap=document.createElement("div");
            var confirmHtml="<div class='confirm-whole' style='width:450px;height:320px;border:1px solid red'>"+
                "<div class='confirm-content'>"+refs+"</div>"+
                "<div class='confirm-footer'>"+
                   "<button id='confirm-btn-ok'>确定</button>"+
                   "<button id='confirm-btn-cancel' >取消</button>"+
                "</div>"+
            "</div>";
        
            confirmWrap.innerHTML=confirmHtml;
            document.body.appendChild(confirmWrap);
        }
         // 在调用Confirm()的时候立即执行create(),生成confirm面板
         this.create();
    
         // 点击确定按钮
         document.getElementById('confirm-btn-ok').onclick=function(){ 
             callbackOk && callbackOk();
             document.getElementsByClassName('confirm-whole')[0].remove();
         }
         // 点击取消按钮
         document.getElementById('confirm-btn-cancel').onclick=function(){ 
            callbackCancel && callbackCancel();
            document.getElementsByClassName('confirm-whole')[0].remove();
         }
    }

特别说明：这份代码中，对于confirm样式布局 的实现几乎是0 ，以后在具体应用需要使用到时再去实现吧。

代码的整体思路：  
1、在需要出现confirm时 使用Confirm构造函数，生成confirm实例。  
2、调用确定和取消方法，传入参数，在这里参数是一个函数，也可以是字符串，并分别保存（因为先后执行 ，后面的会覆盖前面的值）  
3、在点击 确定 取消按钮时再执行之前已经传入的 代码。