<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. lua 中的上n级模块路径函数分享

    --- 得到 lua 模块路径的上 n 级,返回的的字符串结尾有个 "." 字符 -- @usage getUpFloder("math.base.core", ...

  2. Java—IO流 对象的序列化和反序列化

    序列化的基本操作 1.对象序列化,就是将Object转换成byte序列,反之叫对象的反序列化. 2.序列化流(ObjectOutputStream),writeObject 方法用于将对象写入输出流中 ...

  3. Linq批量建表

    public JsonResult CreateTable() { db = new RZBDbContext(); var query = (from c in db.Clients select ...

  4. MySQL案例之Timestamp和Datetime

    mysql数据库常用的时间类型有timestamp和datetime,两者主要区别是占用存储空间长度不一致.可存储的时间也有限制,但针对不同版本下,timestamp字段类型的设置需要慎重,因为不注意 ...

  5. ASP.NET常用内置对象之——Server

    简介 Server对象是HttpServerUtility的一个实例,也是上下文对象context的一个属性,提供用于处理Web请求的Helper方法. 常用成员 一.Server.MapPath() ...

  6. iOS文件处理类

    iOS文件处理类 这是一个用来简化iOS中关于文件操作的一个类,所有方法都为类方法. Source File.h // // File.h // FileManager // // http://ho ...

  7. January 18 2017 Week 3 Wednesday

    True liberty is to have power over oneself in all things. 真正的自由是在所有的事情上都能控制住自己. Liberty isn't meanin ...

  8. BZOJ3999:[TJOI2015]旅游(树链剖分)

    Description 为了提高智商,ZJY准备去往一个新世界去旅游.这个世界的城市布局像一棵树.每两座城市之间只有一条路径可 以互达.每座城市都有一种宝石,有一定的价格.ZJY为了赚取最高利益,她会 ...

  9. 输出预测边界框，NMS非极大值抑制

    我们预测阶段时: 生成多个锚框 每个锚框预测类别和偏移量 但是,当同一个目标上可能输出较多的相似的预测边界框.我们可以移除相似的预测边界框.——NMS(非极大值抑制). 对于一个预测边界框B,模型会计 ...

  10. 【[USACO12FEB]附近的牛Nearby Cows】

    我记得我调这道题时中耳炎,发烧,于是在学长的指导下过了也没有发题解 发现我自己的思路蛮鬼畜的 常规操作:\(f[i][j]\) 表示到\(i\)的距离为\(j\)的奶牛有多少只,但注意这只是在第二遍d ...