由于项目想精简不想用其他第三方的ui插件，又很需要像confirm等小效果来完善交互，且使用的频率也是相当的高，于是自己造了一个，省时也省力

代码已经粘贴出来，直接复制即可看到效果，高手勿喷，可以相互交流下（⊙⊙）

（hmtl js css已经集成到一起无需其他文件，不依赖jquery zepto等库）

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        #button, #button2 {
            background: #aaa;
            height: 35px;
            min-width: 100px;
            text-align: center;
            line-height: 35px;margin-bottom: 20px;
        }
    </style>
</head>

<body>
<div id="button">一个确定按钮</div>

<div id="button2">一个确定一个取消按钮</div>

    <script>
        var obj = {
            plugin: (function () {
                function ZjsjConfirm() {
                    this.opt = {
                        confirm: new Function(),
                        concel: new Function(),
                        text: ''
                    }
                    this.prevent = function (e) {
                        e.preventDefault()
                    }
                    this.init()
                }

                ZjsjConfirm.prototype = {
                    init: function () {
                        var ndDom = document.getElementById('zjsjPopConfirmWrapper')
                        if (ndDom !== null) ndDom.parentNode.removeChild(ndDom);
                        this.dom_div = document.createElement("div")
                        this.dom_div.id = "zjsjPopConfirmWrapper";
                        var style = document.createElement("style");
                        style.innerHTML = '*{outline:none;}#zjsjPopConfirmShade{position:fixed;top:0;left:0;z-index:999999;width:100%;bottom:0;z-index:999999998;background:rgba(0,0,0,.3);display:none;}#zjsjPopConfirm{width:13em;height:auto;overflow:hidden;background:#fff;display:none;border-radius:.4em;-webkit-border-radius:.4em;position:fixed;z-index:999999999;left:50%;top:50%;transform:translate(-50%,-50%);webkit-transform:translate(-50%,-50%);}.zjsjPopText{font-size:.95em;line-height:1.5em;text-align:center;width:100%;padding:.7em .625em .5em .625em;box-sizing:border-box;-webkit-box-sizing:border-box;color:#555;}.zjsjPopButton{width:100%;border-top:1px solid #e1e1e1;color:#5998ff;font-size:.95em;}.zjsjPopYes,.zjsjPopNo{line-height:1em;text-align:center;float:left;width:50%;box-sizing:border-box;-webkit-box-sizing:border-box;padding:.7em 0;position:relative;}.zjsjPopNo:after{content:"";position:absolute;left:0;top:50%;width:1px;background:#e1e1e1;height:100%;transform:translate(-50%,-50%);webkit-transform:translate(-50%,-50%);}';
                        this.dom_div.innerHTML = '<div id="zjsjPopConfirm"><div class="zjsjPopText"id="zjsjPopConfirmText">这是一个悲剧的故事！！！</div><div class="zjsjPopButton"><div class="zjsjPopYes"id="zjsjPopConfirmYes">确定</div><div class="zjsjPopNo"id="zjsjPopConfirmNo">取消</div></div></div><div id="zjsjPopConfirmShade"></div>';
                        document.head.appendChild(style);
                        document.body.appendChild(this.dom_div);
                        this.bottonYes = document.querySelector('#zjsjPopConfirmYes');
                        this.bottonNo = document.querySelector('#zjsjPopConfirmNo');
                        this.ngtext = document.querySelector('#zjsjPopConfirmText');
                        this.shade = document.querySelector('#zjsjPopConfirmShade');
                        this.wrap = document.querySelector('#zjsjPopConfirm');
                    },
                    onButton: function () {
                        var that = this
                        that.ngtext.innerText = this.opt.text
                        that.shade.style.display = "block"
                        that.wrap.style.display = "block"

                        return function () {
                            var isFun = typeof that.opt.confirm
                            var ngDom = this.id

                            if (isFun === 'function' && ngDom === 'zjsjPopConfirmYes') {
                                that.opt.confirm()
                                that.shade.style.display = "none"
                                that.wrap.style.display = "none"
                            } else {
                                if (ngDom === 'zjsjPopConfirmNo' && isFun === 'function') {
                                    that.opt.concel()
                                }
                                that.shade.style.display = "none"
                                that.wrap.style.display = "none"
                            }
                            that.dom_div.removeEventListener('touchmove', that.prevent, false);
                            that.bottonYes.removeEventListener('click', that.back, false);
                            that.bottonNo.removeEventListener('click', that.back, false);
                        }
                    },
                    setInfo: function (opt) {
                        var that = this
                        // var el = document.querySelector(opt.el);
                        var _n = document.querySelector('#zjsjPopConfirmNo');
                        var _y = document.querySelector('#zjsjPopConfirmYes');
                        var type = opt.type ? opt.type : 0
                        switch (type) {
                            case 1:
                                _n.style.display = 'none'
                                _y.style.width = '100%'

                                break;
                            default:
                                _n.style.display = 'block'
                                _y.style.width = '50%'
                                break;
                        }
                        // el.addEventListener("click", function () {
                        that.opt.text = opt.text
                        that.opt.confirm = opt.confirm
                        that.opt.concel = opt.concel
                        that.back = that.onButton()
                        that.bottonYes.addEventListener("click", that.back, false);
                        that.bottonNo.addEventListener("click", that.back, false);
                        that.dom_div.addEventListener('touchmove', that.prevent, false);
                        // }, false);
                    }
                }
                return function () {
                    return new ZjsjConfirm();
                }
            })()
        }

      //使用1  单个确认弹出窗
        button.addEventListener("click", function () {
            obj.plugin().setInfo({
                text: 'yooooo',
                confirm: function () {
                    console.log('你点了确定')
                },
                type: 1
            })
        })

　　　　//使用2 有确认和取消两个按钮
        button2.addEventListener("click", function () {
            obj.plugin().setInfo({
                text: 'sfsdfsdfsdfsd',
                confirm: function () {
                    console.log('你点了确定')
                },
                concel: function () {
                    console.log('你点了取消')
                }
            })
        })
    </script>
</body>
</html>

　　

觉得有帮助的同学，可以支持作者，谢谢！！
　支付宝：         微信：

写了一个迷你confirm弹窗插件，有取消和确认操作处理并支持单个确认使用弹窗和锁屏禁止滚动的更多相关文章

  1. 写了一个迷你toast提示插件，支持自定义提示文字和显示时间

    写了一个迷你toast提示插件,支持自定义提示文字和显示时间,不想用其他第三方的ui插件,又想要toast等小效果来完善交互的同学可以试试, 代码中还贡献了一段css能力检测js工具函数,做项目的时候 ...

  2. 自己写的一个jQuery轮播插件

    大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...

  3. 自己写的一个jQuery对联广告插件

    效果图: 文件的位置摆放: 插件的代码: ;(function($){ $.extend({ dLAdv:function(options){ var defaults={ leftType:0,// ...

  4. [browser navigator 之plugins] 写了一个检测游览器插件

    检测IE插件 function hasIEPlugin(name){ try{ new ActiveXObject(name); return true; }catch(ex){ return fal ...

  5. 001.Delphi插件之QPlugins，一个最简单的插件

    安装QPlugins里面的Demo,复制粘贴着写了一个最简单的插件,看看好不好用 EXE代码如下: unit Main_Frm; interface uses Winapi.Windows, Wina ...

  6. android开发技巧——仿新版QQ锁屏下弹窗

    新版的qq,可以在锁屏下弹窗显示qq消息,正好目前在做的项目也需要这一功能.经过各种试验和资料查找,终于实现,过程不难,但是却有一些地方需要注意. 下面是实现过程. 1.使用Activity,而不是V ...

  7. 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）

    前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...

  8. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  9. 分享一下自己写的一个vscode-leetcode答题插件

    0. 前言 春节这几天每天吃吃喝喝睡睡玩玩,突然发现明天就要上班了,吓得我虎躯一震. 春节结束之后,学生党们陆续开学,相信有许多同学马上就要在春季招聘中拼杀一番.想要收获心意的offer,当然免不了对 ...

随机推荐

  1. Python学习笔记开篇

    已经快30岁了,中专学历,不会什么技术,因为好吃懒做最喜欢的就是吃肉睡觉. 每次想学习技术如PhotoShop,绘声绘影,PHP,易语言,按键精灵都只是3分钟热血. 今天我想在业余时间学习Python ...

  2. 迈向angularjs2系列(7):表单

    目录 一:校验表单的使用 1.搭建脚手架 2.校验表单的使用 3.select下拉列表的用法 一: 校验表单的使用 对于CRUD型的应用,表单是必备组件. 1.搭建脚手架 git clone http ...

  3. Markdown最佳实践

    Markdown 最佳实践 结合目前看到的信息,总结使用Markdown的最方便的方式. 我的需求是: 能够配合各种笔记软件使用,目前主要使用的是为知笔记和有道笔记.笔记的内容需要记录代码及数学公式, ...

  4. 使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序

    使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻 ...

  5. 零基础如何一步一步开始搭建高性能直播平台？现以GitChat·架构来进行说明

    前言 现在直播已经成为移动互联网时代一个新的重要流量入口,从YY.斗鱼到花椒直播,直播已经成为人们分享交流的新方式,应用场景众多,主要分为: 金融类直播:金融直播可应用于实时解盘,在线专家讲座,专家在 ...

  6. TCP/IP协议栈模型

    OSI七层模型介绍: 下面4层(物理层.数据链路层.网络层和传输层)主要提供数据传输和交换功能,即以节点到节点之间的通信为主:第4层作为上下两部分的桥梁,是整个网络体系结构中最关键的部分:而上3层(会 ...

  7. Microsoft Dynamics 365 之 味全食品 项目分享和Customer Engagement新特性分享

    味全食品 Dynamics 365项目: 在企业门户和电子商务等新营销模式频出的今天,零售业需要利用统一的管理平台管理日益庞大的客户及销售数据,整合线上线下的零售业务,从采购.仓储.生产.配送到销售. ...

  8. JavaScript: 使用 atan2 来绘制 箭头 和 曲线

    最近搞Canvas绘图,知道了JavaScript中提供了atan2(y,x)这样一个三角函数.乍眼一看,不认识,毕竟在高中时,学过的三角函数有:sin,cos,arcsin,arccos,tan,a ...

  9. Linux shell中的竖线（|）——…

    原文地址:Linux shell中的竖线(|)--管道符号作者:潇潇 管道符号,是unix一个很强大的功能,符号为一条竖线:"|". 用法: command 1 | command ...

  10. 团队作业4——第一次项目冲刺 tHe LaSt dAy

    项目冲刺--终点 敏捷冲刺最后一天,没想到前一天就上榜了,我也很无奈啊. 那今天就老老实实写一篇博客好了. Mission 这次敏捷冲刺呢,我们主要做了前端页面,后台的数据库和添加了基本的增删查改的功 ...