<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. SQL Server ->> FileTable

    FileTable是SQL Server 2012的新特性之一.它是基于SQL Server 2008的FILESTREAM特性上而来的,允许我们把Windows文件存储在SQL Server中,让S ...

  2. QA-IDEA中用maven配置项目无法加载JDBC

    java.lang.ClassNotFoundException: com.mysql.jdbc.Driver Im building Maven Java Web application and w ...

  3. Linux文件的I/O操作

    C标准函数与系统函数的区别   标准函数printf调用应用层api,然后应用层api调用内核层api,再通过内核层api调用硬件设备   一个pirntf打印helloworld那么sys_writ ...

  4. js漂浮广告实现代码（合集经典）

    <html> <head> <title>漂浮广告</title> <body> <div id="codefans_net ...

  5. Spark Broadcast内幕解密：Broadcast运行机制彻底解密、Broadcast源码解析、Broadcast最佳实践

    本课主题 Broadcast 运行原理图 Broadcast 源码解析 Broadcast 运行原理图 Broadcast 就是将数据从一个节点发送到其他的节点上; 例如 Driver 上有一张表,而 ...

  6. redis知识树

  7. 105 + 106. Construct Binary Tree from Preorder and Inorder Traversal (building trees)

    Given preorder and inorder traversal of a tree, construct the binary tree. Note: You may assume that ...

  8. System IPC 与Posix IPC（semaphore信号灯）

    POSIX下IPC主要包括三种: posix message queue posix semaphores posix shared memory sysytem v IPC包括: system v ...

  9. Windows Server 2008 安装wampserver失败的总结

    1.最好选择2.4以下版本. 2.如果报确实MSVCR100.dll的错误,需要下载运行环境包(参考博客)

  10. Java导出Highcharts需要的3个外部jar包

    xerces batik fop 这三个JAR包. 绝对可用.自本用过. 如果两个项目在同一个TOMCAT下并且同时用到xerces.jar,需要前这个外放在TOMCAT下的lib目录下.其他的容器中 ...