本文参考博客园另一篇文章: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. GitLab 基本操作

    登录 在浏览其中输入http://192.168.3.11:8888 如图1登录界面.   图1 注:第一次新增用户,会发送修改密码链接到用户的邮箱中,用户会收到如图2邮件. 图2 2. 修改密码 点 ...

  2. Python 爬虫 (四)

    requests: 练手 雪qiu网 import requests import json import re import pymysql url = 'https://xueqiu.com/v4 ...

  3. golang 多维哈希(map,hashmap)实践随笔

    有些场景使用多维哈希来存储数据,时间复杂度恒定,简单粗暴好用.这里记录一下. 如下是三维哈希的简单示意图,建议层数不要太多,否则时间久了,自己写的代码都不认识. 下图是三维哈希在内存的存储形式,has ...

  4. ssm中需要注意的问题

    1.在controller中需要加注解 @Controller @RequestMapping("url") @Autowired private CardService card ...

  5. BZOJ1029_建筑抢修_KEY

    题目传送门 这是一道贪心的问题. 总体做法是这样的:先按照报废的快慢从小到大SORT一遍,优先修报废快的.同时开一个大根堆(C++的朋友可以用priority_queue),用来记录已经修了的建筑的耗 ...

  6. 成都Uber优步司机奖励政策（1月11日）

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

  7. 长沙优步Uber奖励政策（7.27~8.2）

    奖励前提 *必须满足当周评分4.7星及以上,且当周接单率70%及以上,才有资格获得奖励 *当周上线时间不低于7小时 *刷单和红线行为立即封号并取消当周全部奖励! *机场高速费用不参与翻倍奖励 *早高峰 ...

  8. spring源码-BeanPostProcessor-3.3

    一.BeanPostProcessor这个是spring容器的拓展之一,是用于获取bean的时候处理对应的对象: 二.常用场景,在获取bean的时候,重新初始化bean的属性等. 三.实现方式(加入容 ...

  9. jquery实现倒计时功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Ruby on Rails Tutorial 第2版 学习笔记

    Ruby on Rails Tutorial 第2版 在线阅读:http://railstutorial-china.org/ 英文版:http://ruby.railstutorial.org/ru ...