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

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

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

  1. <!DOCTYPE html>
  2. <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8.     <style>
  9.         #button, #button2 {
  10.             background: #aaa;
  11.             height: 35px;
  12.             min-width: 100px;
  13.             text-align: center;
  14.             line-height: 35px;margin-bottom: 20px;
  15.         }
  16.     </style>
  17. </head>
  18.  
  19. <body>
  20. <div id="button">一个确定按钮</div>
  21.  
  22. <div id="button2">一个确定一个取消按钮</div>
  23.  
  24.     <script>
  25.         var obj = {
  26.             plugin: (function () {
  27.                 function ZjsjConfirm() {
  28.                     this.opt = {
  29.                         confirm: new Function(),
  30.                         concel: new Function(),
  31.                         text: ''
  32.                     }
  33.                     this.prevent = function (e) {
  34.                         e.preventDefault()
  35.                     }
  36.                     this.init()
  37.                 }
  38.  
  39.                 ZjsjConfirm.prototype = {
  40.                     init: function () {
  41.                         var ndDom = document.getElementById('zjsjPopConfirmWrapper')
  42.                         if (ndDom !== null) ndDom.parentNode.removeChild(ndDom);
  43.                         this.dom_div = document.createElement("div")
  44.                         this.dom_div.id = "zjsjPopConfirmWrapper";
  45.                         var style = document.createElement("style");
  46.                         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%);}';
  47.                         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>';
  48.                         document.head.appendChild(style);
  49.                         document.body.appendChild(this.dom_div);
  50.                         this.bottonYes = document.querySelector('#zjsjPopConfirmYes');
  51.                         this.bottonNo = document.querySelector('#zjsjPopConfirmNo');
  52.                         this.ngtext = document.querySelector('#zjsjPopConfirmText');
  53.                         this.shade = document.querySelector('#zjsjPopConfirmShade');
  54.                         this.wrap = document.querySelector('#zjsjPopConfirm');
  55.                     },
  56.                     onButton: function () {
  57.                         var that = this
  58.                         that.ngtext.innerText = this.opt.text
  59.                         that.shade.style.display = "block"
  60.                         that.wrap.style.display = "block"
  61.  
  62.                         return function () {
  63.                             var isFun = typeof that.opt.confirm
  64.                             var ngDom = this.id
  65.  
  66.                             if (isFun === 'function' && ngDom === 'zjsjPopConfirmYes') {
  67.                                 that.opt.confirm()
  68.                                 that.shade.style.display = "none"
  69.                                 that.wrap.style.display = "none"
  70.                             } else {
  71.                                 if (ngDom === 'zjsjPopConfirmNo' && isFun === 'function') {
  72.                                     that.opt.concel()
  73.                                 }
  74.                                 that.shade.style.display = "none"
  75.                                 that.wrap.style.display = "none"
  76.                             }
  77.                             that.dom_div.removeEventListener('touchmove', that.prevent, false);
  78.                             that.bottonYes.removeEventListener('click', that.back, false);
  79.                             that.bottonNo.removeEventListener('click', that.back, false);
  80.                         }
  81.                     },
  82.                     setInfo: function (opt) {
  83.                         var that = this
  84.                         // var el = document.querySelector(opt.el);
  85.                         var _n = document.querySelector('#zjsjPopConfirmNo');
  86.                         var _y = document.querySelector('#zjsjPopConfirmYes');
  87.                         var type = opt.type ? opt.type : 0
  88.                         switch (type) {
  89.                             case 1:
  90.                                 _n.style.display = 'none'
  91.                                 _y.style.width = '100%'
  92.  
  93.                                 break;
  94.                             default:
  95.                                 _n.style.display = 'block'
  96.                                 _y.style.width = '50%'
  97.                                 break;
  98.                         }
  99.                         // el.addEventListener("click", function () {
  100.                         that.opt.text = opt.text
  101.                         that.opt.confirm = opt.confirm
  102.                         that.opt.concel = opt.concel
  103.                         that.back = that.onButton()
  104.                         that.bottonYes.addEventListener("click", that.back, false);
  105.                         that.bottonNo.addEventListener("click", that.back, false);
  106.                         that.dom_div.addEventListener('touchmove', that.prevent, false);
  107.                         // }, false);
  108.                     }
  109.                 }
  110.                 return function () {
  111.                     return new ZjsjConfirm();
  112.                 }
  113.             })()
  114.         }
  115.  
  116.       //使用1  单个确认弹出窗
  117.         button.addEventListener("click", function () {
  118.             obj.plugin().setInfo({
  119.                 text: 'yooooo',
  120.                 confirm: function () {
  121.                     console.log('你点了确定')
  122.                 },
  123.                 type: 1
  124.             })
  125.         })
  126.  
  127. 　　　　//使用2 有确认和取消两个按钮
  128.         button2.addEventListener("click", function () {
  129.             obj.plugin().setInfo({
  130.                 text: 'sfsdfsdfsdfsd',
  131.                 confirm: function () {
  132.                     console.log('你点了确定')
  133.                 },
  134.                 concel: function () {
  135.                     console.log('你点了取消')
  136.                 }
  137.             })
  138.         })
  139.     </script>
  140. </body>
  141. </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. [读书笔记] 四、SpringBoot中使用JPA 进行快速CRUD操作

    通过Spring提供的JPA Hibernate实现,进行快速CRUD操作的一个栗子~. 视图用到了SpringBoot推荐的thymeleaf来解析,数据库使用的Mysql,代码详细我会贴在下面文章 ...

  2. 如何在环境变量里配置tomcat

    安装好后,配置环境变量:计算机--右击--属性--高级系统设置设置--环境变量 4 新建系统变量 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7.0(这个 ...

  3. .NET Core多平台开发体验[2]: Mac OS X

    除了微软自家的Windows平台, .NET Core针对Mac OS以及各种Linux(RHEL.Ubuntu.Debian.Fedora.CentOS和SUSE等)都提供了很好的支持,我们先来体验 ...

  4. 浅析SQL Server在可序列化隔离级别下，防止幻读的范围锁的锁定问题

    本文出处:http://www.cnblogs.com/wy123/p/7501261.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...

  5. 一、Nginx安装手册

    1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有g ...

  6. jQuery控制a标签不可点击 不跳转

    jquery禁用a标签方法1 01 02 03 04 05 06 07 08 09 10 11 12 $(document).ready(function () {         $("a ...

  7. log4j与log4j.properties的配置

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt233 摘要: 一.配置步骤 1.  在应用程序中使用log4j 2.  把l ...

  8. CSS背景效果

    前面的话 本文将详细介绍CSS背景效果 条纹背景 [双条纹背景] background:linear-gradient(#fb3 50%, #58a 50%); background-size: 10 ...

  9. unix下的文件和目录详解以及操作方法

    前言:unix下一切东西都是文件,一共有7种不同的文件,前一篇博客已经讲解的很清楚了,不懂的可以看看这里.当然,博主知道有些朋友比忙,没时间看,那我就简单点讲讲这7中文件都有哪些吧. 文件类型包括在s ...

  10. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...