<html>

 <head>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

     <style>

     /* 首页弹出层 */

     .confirm-tips{width:100%; height:100%; background:url(apher.png); position:fixed; top:0; z-index:999999999;overflow: auto;}

     .confirm-tips-box{width:500px; height:334px; background:#FFF; position:absolute;top:25%;}

     .confirm-tips-box h2{display:block; margin-top:50px; text-align:center; font-size:36px; font-weight:normal; color:#3881eb;}

     .confirm-tips-box p{font-size:20px; color:#757c8a; text-align:center; display:block; margin-top:36px;}

     .autobut a.submissionqx{display:inline-block; width:188px; height:60px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #3881eb; text-align:center; line-height:60px; color:#3881eb; margin:0 auto; margin-top:60px; margin-bottom:50px; margin-left:45px; margin-right:30px;}

     .autobut a.submission{display:inline-block; width:188px; height:60px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; background:#3881eb; text-align:center; line-height:60px; color:#FFF; margin:0 auto; margin-top:60px; margin-bottom:50px;}

 </style>

 </head>

 <body>

 <input id='alter_btn' type='button' value='弹窗确定取消按钮'/>

 <span id='msg'></span>

 <script>

 /**

  * 共用弹窗 确定 取消按钮

  * eg: option = {

  *     title:'标题',

  *     msg:'内容',

  *     confirm:function(){

  *         点击确定执行的方法

  *     },

  *     cancel:function(){

  *         点击取消执行的方法

  *     }

  * }

  * eg: $.confirm_tips(option);

  * @param obj

  */

 $.confirm_tips = function(obj){

     if(obj && obj.msg != ''){

         if(!obj.title){

             obj.title = '系统提示';

         }

         var left = parseFloat(($(document).width()-500)/2);

         var tips_html = '<div class="confirm-tips confirm-tips-common" >' +

             '<div class="confirm-tips-box" style="left:'+left+'px;">\n' +

             '        <h2>'+obj.title+'</h2>\n' +

             '        <p style="padding: 0 15px">'+obj.msg+'</p>\n' +

             '        <div class="autobut">\n' +

             '        <a href="javascript:;" class="submissionqx confirm-tips-cancelbtn">取消</a>\n' +

             '        <a href="javascript:;" class="submission confirm-tips-confirmbtn">确定</a>\n' +

             '        </div>\n' +

             '    </div></div>';

         if($('.confirm-tips-common').length <= 0){

             $('body').append(tips_html);

         }

         $('.confirm-tips-confirmbtn').click(function(){

             if(obj.confirm){

                 obj.confirm();

             }

             $('.confirm-tips-common').remove();

             $('.confirm-tips-confirmbtn').unbind();

         })

         $('.confirm-tips-cancelbtn').click(function(){

             if(obj.cancel){

                 obj.cancel();

             }

             $('.confirm-tips-common').remove();

             $('.confirm-tips-cancelbtn').unbind();

         })

     }

 }

 $('#alter_btn').click(function(){

     var option = {

         title:'标题',

         msg:'内容',

         confirm:function(){

             $('#msg').text('确定');

         },

         cancel:function(){

             $('#msg').text('取消');

         }

     };

     $.confirm_tips(option);

 })

 </script>

 </body>

 </html>

JS通用弹窗，确定,取消可以回调方法。的更多相关文章

  1. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

  2. JS~jwPlayer为js预留的回调方法大总结

    对于一个成功的产品,它是对外封闭的,但又是对外开放的,这句话并不矛盾,让我来说一下,说它对外封闭是因为它本身的代码不允许你去修改,而说它开放,是因为它为我们定义了很多API,或者叫回调方法,对于jwp ...

  3. 常用js，css文件统一加载方法，并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  4. 【转】第5篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  5. 【转】第4篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-18 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第4篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  6. 关于js回调方法 js递归时使用方法

    js中递归调用本身可以这样: function a1(n){ a1(n)}但是如果需要在参数n进行自增的情况下判断会出错: function a1(n){ if(n>10) return 'aa ...

  7. jwPlayer为js预留的回调方法

    参考地址:http://www.cnblogs.com/lori/archive/2014/05/05/3709459.html 应用场合 播放时记录当前视频的时间,播放完成时写入完成的时间,像这些功 ...

  8. js静态方法与实例方法定义，js回调方法定义

    主要为了回调方法,随便把静态言法和实例方法也回顾一下. <script type="text/javascript"> var fun = { //下面是静态方法(第一 ...

  9. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

随机推荐

  1. zookeeper & kafka 集群

    http://cloudurable.com/blog/kafka-architecture/index.html 静态解析 cat >> /etc/hosts << EOF ...

  2. 上传附件（图片base64）封装方法

    上传附件(图片base64)封装方法 php 上传附件,base64 项目中封装的接口: public function error($msg){ header("Content-type: ...

  3. python 图形界面

    Python自带的库是支持Tk的Tkinter,使用Tkinter,无需安装任何包,就可以直接使用. Tk是一个图形库,支持多个操作系统 导入Tkinter包的所有内容: from tkinter i ...

  4. python 枚举类

    枚举类 Enum类 from enum import Enum Month = Enum('Month', ('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Ju ...

  5. hearbeat

    heartbeat介绍: 作用: 通过heartbeat,可以将资源(IP及程序服务等资源)从一台已经故障的计算机快速转移到另一台正常运转的机器上继续提供服务,一般称之为高可用服务.在升级生产应用场景 ...

  6. ZT 怎么样才算熟悉设计模式？ [问题点数：40分，结帖人jiaoyun007]

    http://bbs.csdn.net/topics/390448668?page=1#post-394406161 近日面试,因为个人简历里有“熟悉设计模式”这句话,面试官边侃侃发问了:什么是装饰模 ...

  7. [转]Android开源项目收藏分享

    转自:http://blog.csdn.net/dianyueneo/article/details/40683285 Android开源项目分类汇总 如果你也对开源实现库的实现原理感兴趣,欢迎 St ...

  8. dynamic_cast动态转换

    我们都知道dynamic_cast会在运行时进行类型检查,比较安全,static_cast静态转换,不安全 dynamic_cast转换的类型必须是个类,且这个类中必须有虚函数,为什么呢? 虚函数对于 ...

  9. mvc:view-controller 标签

    一.SpringMVC 会把ModelAndView 的model中的数据放到request 域中 二.如果不想让请求经过任何handler,而直接响应页面,可以使用 mvc:view-control ...

  10. 通俗易懂的来讲讲DOM——科普性质的DOM入门教程

    DOM这个东西很重要,不过初学的时候很容易蒙,什么Document.Element.Node用官方语言来解释根本就不是人话,只能在实践中硬着头皮一点一点尝试.今天要推荐的是一篇关于DOM的博客.说是教 ...