本文参考博客园另一篇文章: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. S3C2440启动程序运行过程

    s3c2440有两种启动方式,一种Nor flash 启动,一种Nand flash 启动. 由于NAND FLASH是接在NAND FLASH控制器上而不是系统总线上,所以没有在S3C2440A的8 ...

  2. C程序设计语言笔记-第一章

     The C Programming language notes 一 基础变量类型.运算符和判断循环         char                 字符型  character      ...

  3. HDOJ：1533-Going Home（最小费用流）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1533 解题心得: 第一次写最小费用流的题,去hdoj上找了一个入门级题目,建图比较简单,用了spfa和 ...

  4. 20145202mc《计算机病毒》实践2

    网站检测 http://www.virustotal.com太慢了实在,所以我换成了http://www.virscan.org/ lab01-01.exe 文件行为 lab01-01.dll 可以基 ...

  5. Lvm linux磁盘分区管理（多个分区合并成一个）

    备份# rsync -avP -e ssh /data qqmap@10.173.139.100:/data1/qqmap/backup/10.234.22.143卸载# umount /data / ...

  6. 北京Uber优步司机奖励政策（2月26日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. leetcode笔记9 Move Zeroes

    题目要求: Given an array nums, write a function to move all 0's to the end of it while maintaining the r ...

  8. C# 委托 / 跨线程访问UI / 线程间操作无效: 从不是创建控件“Form1”的线程访问它

    C# 委托 / 跨线程访问UI /  线程间操作无效: 从不是创建控件“Form1”的线程访问它 网上的代码都比较复杂,还是这个简单 见代码, 简易解决办法: 主窗体代码 using System; ...

  9. eclipse导入jmeter3.1源码并运行

    jmeter3.1源码地址:https://archive.apache.org/dist/jmeter/source/ 1.打开eclipse,新建一个java project的项目,并点击next ...

  10. 第五模块·WEB开发基础-第3章jQuery&Bootstrap

    01-jQuery介绍 02-如何使用jQuery 03-jQuery的入口函数 04-jQuery对象和JS对象的相互转换 05-jQuery如何操作DOM 06-底层选择器 07-基本过滤器 08 ...