<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. QT的QPropertyAnimation讲解

    m_pAnimation->setEasingCurve(QEasingCurve::Linear); //直线风格 m_pAnimation->setLoopCount(-1); //无 ...

  2. 数据库建模工具 PD的使用

    1.1. 数据库建模工具 PD的使用 安装12.5版本,进行破解 PD 是最专业数据建模工具, 是 Sybase 公司一个 产品 PD 提供四种模型文件 PDM 物理数据模型,面向数据库表结构设计,直 ...

  3. lua之m进制转换为n进制-任意进制转换算法

    够无聊的写这个,为防止需要的人也无聊一遍,写个吧 算法有n种,但是,咱们一种就够用了 --数组倒序排列 local function orderByDesc( input ) local output ...

  4. Oracle Update语句

    Oracle没有update from语法,可以通过四种写法实现同样的功能: 一.标准update语法(常用.速度可能最慢) 当更新的表示单个或者被更新的字段不需要关联表带过来,此法是最好的选择. u ...

  5. Linux-python的一些小问题

    1.python版本和pip版本 2.PATH和PYTONPATH 1.python版本和pip版本 1.python版本 一般Ubuntu里面都装的不止一个版本的python,比如有python2. ...

  6. Java中类继承、接口实现的一些要注意的细节问题

    1.接口A和接口B有相同的方法,只是返回值不同,则实现类不能同时实现这两个接口中的方法. 接口A有void C()方法,接口B有int C()方法,则无法同时实现这两个接口. Java为了弥补类单继承 ...

  7. java中的泛型2--注意的一些问题和面试题

    前言 这里总结一下泛型中需要注意的一些地方和面试题,通过面试题可以让你掌握的更清楚一些. 泛型相关问题 1.泛型类型引用传递问题 在Java中,像下面形式的引用传递是不允许的: ArrayList&l ...

  8. SpringMVC 如何定义类型转换器

    举例说明, 将一个字符串转换成的 User 类型. 例如将字符串 1-zcd-1234-zcd@163.com-1999/12/12  转换成User 类型. 一.实体类 public class U ...

  9. UVa 1658 - Admiral（最小费用最大流 + 拆点）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  10. BZOJ2194:快速傅立叶之二(FFT)

    Description 请计算C[k]=sigma(a[i]*b[i-k]) 其中 k < = i < n ,并且有 n < = 10 ^ 5. a,b中的元素均为小于等于100的非 ...