本文参考博客园另一篇文章:https://www.cnblogs.com/hzj680539/p/5374052.html，在此感谢。

在实际开发当中，考虑到原生js组件，包括alert、confirm等的体验较差，很多公司会考虑将这些组件进行重写、疯转。

本文参考的文章里，作者所实现的自定义confirm有一些比较明显缺点，当然也有其优点。

我这篇文章是按照我的设想，对齐进行了改造。

改造点1：在实际应用中，css命名规则容易被其它样式名干扰，所以改造为所有css带有前缀：dialog；代码如下

  <style>

     html,

     body {

         margin: 0;

         padding: 0;

         font-family: "Microsoft YaHei";

     }

     .wrap-dialog {

         position: fixed;

         top: 0;

         left: 0;

         width: 100%;

         height: 100%;

         font-size: 16px;

         text-align: center;

         background-color: rgba(0, 0, 0, .4);

         z-index: 999;

     }

     .dialog {

         position: relative;

         margin: 10% auto;

         width: 300px;

         background-color: #FFFFFF;

     }

     .dialog .dialog-header {

         height: 20px;

         padding: 10px;

         background-color: #22b9ff;

     }

     .dialog .dialog-body {

         height: 30px;

         padding: 20px;

     }

     .dialog .dialog-footer {

         padding: 8px;

         background-color: #f5f5f5;

     }

     .dialog-btn {

         width: 70px;

         padding: 2px;

         cursor: pointer;

     }

     .dialog-hide {

         display: none;

     }

     .dialog-ml50 {

         margin-left: 50px;

     }

     </style>

改造点2：js的实现，首先不在依赖jquery，其次不采用dom2的addEventLiistener绑定事件，因为经过测试会产生重复绑定问题；

 <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

 <script>

 $(document).ready(function() {

     //自定義部分

     window.confirm = function(message, yesCallBack, noCallBack) {

         var message = message || "确认删除此条信息?";

         var choose=function(tag){

             return document.querySelector(tag);

         }

        choose(".dialog-message").innerHTML = message;

         // 显示遮罩和对话框

        choose(".wrap-dialog").className = "wrap-dialog";

         // 确定按钮

        choose("#dialog").onclick= function(e){

             if(e.target.className=="dialog-btn"){

                  choose(".wrap-dialog").className = "wrap-dialog dialog-hide";

                  yesCallBack();

             }else if (e.target.className=="dialog-btn dialog-ml50"){

                  choose(".wrap-dialog").className = "wrap-dialog dialog-hide";

                   noCallBack();

             }

         };

         // 取消按钮

     }

     $('#dialog-remove').click(function() {

         function text() {

            alert(22);

         }

         function ttt() {

             alert(111);

         }

         confirm("确认删除", text, ttt);

     });

 });

 </script>

jquery是用来测试的，哈哈。

改造点3：直接改写原生的confirm，而不是另起名称。也就是window.confirm；

最后是整体代码：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>js confirm弹出框自定义样式</title>

    <style>

    html,

    body {

        margin: 0;

        padding: 0;

        font-family: "Microsoft YaHei";

    }

    .wrap-dialog {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        font-size: 16px;

        text-align: center;

        background-color: rgba(0, 0, 0, .4);

        z-index: 999;

    }

    .dialog {

        position: relative;

        margin: 10% auto;

        width: 300px;

        background-color: #FFFFFF;

    }

    .dialog .dialog-header {

        height: 20px;

        padding: 10px;

        background-color: #22b9ff;

    }

    .dialog .dialog-body {

        height: 30px;

        padding: 20px;

    }

    .dialog .dialog-footer {

        padding: 8px;

        background-color: #f5f5f5;

    }

    .dialog-btn {

        width: 70px;

        padding: 2px;

        cursor: pointer;

    }

    .dialog-hide {

        display: none;

    }

    .dialog-ml50 {

        margin-left: 50px;

    }

    </style>

</head>

<body>

    <input type="button" value="删除" class="dialog-btn dialog-ml50" id="dialog-remove">

    //組件html部分

    <div class="wrap-dialog dialog-hide" >

        <div class="dialog" id="dialog">

            <div class="dialog-header">

                <span class="dialog-title">信息确认</span>

            </div>

            <div class="dialog-body">

                <span class="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 src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

    //自定義部分

    window.confirm = function(message, yesCallBack, noCallBack) {

        var message = message || "确认删除此条信息?";

        var choose=function(tag){

            return document.querySelector(tag);

        }

       choose(".dialog-message").innerHTML = message;

        // 显示遮罩和对话框

       choose(".wrap-dialog").className = "wrap-dialog";

        // 确定按钮

       choose("#dialog").onclick= function(e){

            if(e.target.className=="dialog-btn"){

                 choose(".wrap-dialog").className = "wrap-dialog dialog-hide";

                 yesCallBack();

            }else if (e.target.className=="dialog-btn dialog-ml50"){

                 choose(".wrap-dialog").className = "wrap-dialog dialog-hide";

                  noCallBack();

            }

        };

        // 取消按钮

    }

    $('#dialog-remove').click(function() {

        function text() {

           alert(22);

        }

        function ttt() {

            alert(111);

        }

        confirm("确认删除", text, ttt);

    });

});

</script>

</html>

当然，还可以继续改进，比如html改为动态生成，甚至于css也改为动态。这个有兴趣的可以继续。另外我把css的颜色的字母表示改为16进制颜色值。

本文结束。

原生js 自定义confirm的更多相关文章

  1. 使用原生js自定义内置标签

    使用原生js自定义内置标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. 原生js实现自定义alert风格和实现

    2018年6月29 最新更新 添加函数节流,解决多次点击问题,添加单例模式,提高代码性能. <!DOCTYPE html> <html lang="en"> ...

  3. 使用原生js创建自定义标签

    使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  6. 原生JS插件（超详细）

    作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...

  7. JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  8. 如何定义一个高逼格的原生JS插件

    插件的需求 我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下是否需要将一部分经常重复的代码抽象出来,写到一个单独的文件中为以后再次使用.再看一下我们的业务逻辑是否可以为团队服 ...

  9. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

  1. Scala的符号入门

    Spark是由Scala编写的.Spark作为一款十分易用高效的大数据框架使用越来越广泛,Scala也随之有更多的人去学习. 语言相通,相信有python.java基础的程序员学习Scala并没有太大 ...

  2. C语言中结构体的访问方法解读

    在C语言中,对结构体的访问一般有两种常规方式:"."访问和"->"访问.那么两者有什么区别呢?对C语言有一定了解的同学应该知道,我们新建一个结构体的时候, ...

  3. python Tkinter 的 Text 保持焦点在行尾

    https://bbs.csdn.net/topics/390712532 text.see(END)

  4. Tensorflow取消占用全部GPU

    参考:https://www.cnblogs.com/jiu0821/p/9501665.html Tensorflow默认是会占用全部的GPU,而有时候你根本不需要那么占用那么多GPU资源,这时候就 ...

  5. mysql库地址

    https://dev.mysql.com/downloads/connector/

  6. （数据科学学习手札42）folium进阶内容介绍

    一.简介 在上一篇(数据科学学习手札41)中我们了解了folium的基础内容,实际上folium在地理信息可视化上的真正过人之处在于其绘制图像的高度可定制化上,本文就将基于folium官方文档中的一些 ...

  7. jquery table 发送两次请求 解惑

    版本1.10 以下链接为一个较低版本解决方案: http://blog.csdn.net/anmo/article/details/17083125 而我的情况有点作, 情况描述: 1,一个页面两个t ...

  8. Spark入门（Python版）

    Hadoop是对大数据集进行分布式计算的标准工具,这也是为什么当你穿过机场时能看到”大数据(Big Data)”广告的原因.它已经成为大数据的操作系统,提供了包括工具和技巧在内的丰富生态系统,允许使用 ...

  9. c/c++链表的实现

    #include<iostream> #include<string> #define SIZE 3 using std::cout; using std::endl; usi ...

  10. MySQL 存储过程常用SQL语句收集

    1,select curdate() /*2016-10-08*/ 2,select date_sub(curdate(), INTERVAL 6 DAY) /*2016-10-02*/ 3,case ...