本文参考博客园另一篇文章: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. python基础的一些知识点

    ord 将字符转换为ASCIIchr 将ASCII转换为字符 元组不可修改,当只有一个元素时,要添加一个逗号集合不可修改,元素无序,不能重复 列表.元组.字典都是可迭代对象,就是可以遍历的对象多层循环 ...

  2. Java设计模式（4）——创建型模式之单例模式（Singleton）

    一.概述 弥补一下之前没有给设计模式下的定义,先介绍一下设计模式(引用自百度百科): 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结. 使用设计 ...

  3. LeetCode: 31. Next Permutation (Medium)

    1. 原题链接 https://leetcode.com/problems/next-permutation/description/ 2. 题目要求 给出一个整型数组,让我们给出下一个排序情况.注意 ...

  4. What is the reason that a likelihood function is not a pdf?

    From: http://stats.stackexchange.com/questions/31238/what-is-the-reason-that-a-likelihood-function-i ...

  5. 文件同步 单向rsync 双向unison 监控inotifywait 免密登录

    1.负载均衡中文件同步必不可少,我这边选择rsync来实现文件同步 rsync同步文件机制更适用于单向文件同步,可配合unison实现双向同步功能. 实现同步的两种方法 一:ssh方法 rsync - ...

  6. SQL Sever查询语句集锦

    一. 简单查询简单的Transact-SQL查询只包括选择列表.FROM子句和WHERE子句.它们分别说明所查询列.查询的表或视图.以及搜索条件等. 例如,下面的语句查询testtable表中姓名为“ ...

  7. lesson 20 pioneer pilots

    lesson 20 Pioneer pilots driver pilot rider cyclist 骑自行车的人 介词后不加that cover + 距离 = travel 了一段距离 by su ...

  8. .NET中发送邮件的实现

    .NET中发送邮件 注意: 1.引用下列命名空间: using System.Net; using System.Net.Mail; 2.确保你使用的发送邮件的邮箱开启了stamp服务等. /// & ...

  9. 使用SpringBoot整合ssm项目

    SpringBoot是什么? Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程. Spring Boot 现在已经成为Java ...

  10. 【WXS数据类型】RegExp

    生成 regexp 对象需要使用 getRegExp函数,注意与JS的使用方法不同( new RegExp(pattern,modifiers);) 原型:getRegExp(pattern, mod ...