1. //弹框
  2. ;(function () {
  3. var ConfirmBox = function (options){
  4. this.defaults = {
  5. title:"",
  6. topT:"提示",
  7. btnOk:"确定",
  8. btnNo:"取消",
  9. btnConfirm:"",
  10. callback:null
  11. },
  12. this.options = $.extend({}, this.defaults, options);
  13. };
  14. ConfirmBox.prototype = {
  15. constructor: ConfirmBox,
  16. boxOpen:function(){
  17. var teml = "";
  18. teml=teml+'<div id="opp">';
  19. teml=teml+'<div class="opBox js-opBox">';
  20. teml=teml+' <div class="opBoxHead"><i class="icon f16">x</i> '+this.options.topT+'</div>';
  21. teml=teml+' <div class="opBoxCont">';
  22. teml=teml+' <p id="#msgC">'+this.options.title+'</p>';
  23. teml=teml+' </div>';
  24. teml=teml+' <div class="opBoxBot disbox">';
  25. if(this.options.btnConfirm!=""){
  26. teml=teml+' <a href="javascript:;" class="btn-ok">'+this.options.btnConfirm+'</a>';
  27. }else{
  28. teml=teml+' <a href="javascript:;" class="disbox-1 btn-cancel">'+this.options.btnNo+'</a><a href="javascript:;" class="disbox-1 btn-ok">'+this.options.btnOk+'</a>';
  29. }
  30. teml=teml+' </div>';
  31. teml=teml+'</div>';
  32. teml=teml+'<div class="mybg js-mybg" style="display:block;z-index:2200"></div>';
  33. teml=teml+'</div>';
  34.  
  35. if($(".js-opBox").length===0){
  36. $("body").append(teml);
  37. }else{
  38. $(".js-opBox #msgC").html(this.options.title);
  39. }
  40. this.bindEvent();
  41. },
  42. bindEvent:function(){
  43. var that = this;
  44. $(".btn-ok").on("click",function(){
  45. if(typeof (that.options.callback)=="function"){
  46. that.options.callback();
  47. }
  48. });
  49. $(".btn-cancel").on("click",function(){
  50. that.boxClose();
  51. });
  52. },
  53. boxClose:function(){
  54. $("#opp").remove()
  55. }
  56. };
  57. window.ConfirmBox = ConfirmBox;
  58. }());

/* opBox { */
.opBox {width:80%; padding:1rem 1rem 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;  position:fixed; top:50%; left:50%; z-index:2300; background:#fff; border-radius:10px;-webkit-border-radius:10px; overflow:hidden; transform: translate3d(-50%, -50%, 0px); -webkit-transform: translate3d(-50%, -50%, 0px); }
.opBox .opBoxHead { border-bottom:2px solid #00ADEB;padding:.5rem 0; font-size:1.6rem; height:1.5rem; line-height:1.5rem; color:#00ADEB; }
.opBox .opBoxCont {padding:1rem 0rem;}
.opBox .opBoxBot {border-top:1px solid #ececec; margin:0px -1rem;}
.opBox .opBoxBot a { display:block; text-align:center; padding:.8rem 0;border-left:1px solid #ececec;color:#00ADEB; }
.opBox .opBoxBot a:first-of-type {border-left:0 none;color:#7F7F7F;}
/* } opBox */

手机移动端confirm替换方案的更多相关文章

  1. 手机移动端alert替换方案

    //alert ;(function () { var AlertBox = function (options){ this.defaults = { title:"", cal ...

  2. 基于XMPP协议的手机多方多端即时通讯方案

    一.开发背景 1.国际背景 随着Internet技术的高速发展,即时通信已经成为一种广泛使用的通信方式.1996年Mirabilis公司推出了世界上第一个即时通信系统ICQ,不到10年间,即时通信(I ...

  3. Weex详解:灵活的移动端高性能动态化方案

    原文地址:http://www.infoq.com/cn/articles/introducing-weex 在2016年4月份的QCon上,阿里巴巴资深总监,淘宝移动平台及新业务事业部.阿里百川负责 ...

  4. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  5. 深度揭秘阿里移动端高性能动态化方案Weex

    2016年Qcon大会首日,阿里巴巴资深总监.淘宝移动平台.阿里百川负责人庄卓然宣布移动端高性能动态化方案Weex即时内测,并将于6月开源.此消息一出,群情汹涌,在座的程序猿.攻城狮们纷纷拿起手机扫码 ...

  6. 移动端性能监控方案Hertz

    移动端性能监控方案Hertz 吴凯 瑞利 富强 徐宏 ·2016-12-19 16:10 性能问题是造成App用户流失的罪魁祸首之一.App的性能问题包括崩溃.网络请求错误或超时.响应速度慢.列表滚动 ...

  7. Google Earth API 替换方案

    众所周知,GE API将会在15年12月25日结束服务,对于众多采用该API的软件,需要一些替换方案. 例如google map或者cesiumjs http://cesiumjs.org/ 或者尝试 ...

  8. 【多端应用开发系列0.0.0——之总序】xy多端应用开发方案定制

    [目录] 0.0.0 [多端应用开发系列之总序]服务器Json数据处理——Json数据概述 0.0.0 [因] 正在学习多客户端应用开发,挖个坑,把所用到的技术方案,用最简单直白的语言描述出来,写成一 ...

  9. 【转载】jQuery手机移动端触屏日历日期选择

    文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...

随机推荐

  1. Spring+springmvc+Mybatis整合案例 annotation版(myeclipse)详细版

    Spring+springmvc+Mybatis整合案例 Version:annotation版 文档结构图: 从底层开始做起: 01.配置web.xml文件 <?xml version=&qu ...

  2. 关于NIO

    操作系统的IO控制 在整个IO控制方式的发展过程中,始终贯穿着这样一条宗旨:即尽量减少主机对IO控制的干预,把主机从繁杂的IO控制事务中解脱出来,以便更多地去完成数据处理任务.为了缓和高速CPU和IO ...

  3. 从SQL下载大量数据到Excel

    之前不知设计原理,发生了大量数据(超过100w行)直接从数据库读取加载到网页中,直接导致内存溢出. Rediculous! 所以,现在改为分页查询到页面中. 由于其有全局逻辑,故折中每次加载1w条数据 ...

  4. Appium移动自动化测试之问题总结

    1.运行该测试用例,报如下错误 java.lang.NoSuchMethodError: org.openqa.selenium.remote.ErrorHandler.<init>(Lo ...

  5. 如何取消MSSQL自带智能提示步骤,使用第三方智能提示插件

    步骤1如下: [工具]——[选项]——[文本编辑器]——[Transact-SQL]——[IntelliSense]——[Transact-SQL IntelliSense 设置]——(取消选择)—— ...

  6. UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等

    (1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩 ...

  7. Zookeeper的基础知识

    1.Zookeeper是什么? 引用官方的说法:“Zookeeper是一个高性能,分布式的,开源分布式应用协调服务.它提供了简单原始的功能,分布式应用可以基于它实现更高级 的服务.它被设计为易于编程, ...

  8. Calculating Stereo Pairs

    Calculating Stereo Pairs Written by Paul BourkeJuly 1999 Introduction The following discusses comput ...

  9. gerrit 部署手册

    概述 gerrit是谷歌开发用于安卓系统的代码审查的系统,目前已经开源.gerrti使用简单并友好.这里记录了gerrti的部署方法以及其中可能存在的陷阱和问题. 创建专属系统用户 Gerrit co ...

  10. Java多线程开发技巧

    很多开发者谈到Java多线程开发,仅仅停留在new Thread(...).start()或直接使用Executor框架这个层面,对于线程的管理和控制却不够深入,通过读<Java并发编程实践&g ...