<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. SpringMVC学习（三）——基于注解配置的springMVC项目

    可运行的附件地址:http://files.cnblogs.com/files/douJiangYouTiao888/springWithAnnotation.zip 项目说明: 作者环境:maven ...

  2. 【Leetcode】【Medium】Convert Sorted Array to Binary Search Tree

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 解题 ...

  3. python StringIO&BytesIO

    StringIO StringIO就是在内存中读写str 要把str写入StringIO,先创建一个StringIO >>> from io import StringIO>& ...

  4. 如何退出virtualbox scale mode

    进入scale mode之后,可能会退不出来 HOST Key + C. 默认是 右Ctrl + C

  5. ZT C,C++表达式求值顺序 裘老的解释。 [问题点数：300分]

    http://bbs.csdn.net/topics/370153775 [置顶] [推荐] C,C++表达式求值顺序 裘老的解释. [问题点数:300分] 最近这问题有从日经变时经的趋势,这里贴出裘 ...

  6. 360网站卫士SQL注入绕过案例一个

    不要以为用了360就可以高枕无忧,直接在netcraft的site_report中找到源站服务器IP,直接SQL脱裤,甚至可获取服务器权限. 存在漏洞的网站: 手工测试存在注入点: 但是网站有360保 ...

  7. 洛谷 P4593 【[TJOI2018]教科书般的亵渎】

    题目分析 一眼看上去就像是一个模拟题目,但是\(n\)的范围过大. 冷静分析一下发现难点在于如何快速求出幂和. 考虑使用伯努利数. \(B_0=1\) \(B_n=-\frac{1}{n+1}\sum ...

  8. 【转】Impala安装json解析udf插件

    背景 Impala跟Hive一样,是常用的数据仓库组件之一.熟悉Hive的同学肯定知道,Hive官方提供了get_json_object函数用于处理json字符串,但是Impala官方并没有提供类似的 ...

  9. BZOJ1924:[SDOI2010]所驼门王的宝藏(强连通分量,拓扑排序)

    Description Input 第一行给出三个正整数 N, R, C. 以下 N 行,每行给出一扇传送门的信息,包含三个正整数xi, yi, Ti,表示该传送门设在位于第 xi行第yi列的藏宝宫室 ...

  10. js 关联着数组中追加元素

    var arr_data = new Array(); for ( var i in data.data ){ arr_data.push(arr_data[i] = data.data[ i ] ) ...