手机移动端confirm替换方案

时间:2022-09-07 19:20:21
//弹框
;(function () {
var ConfirmBox = function (options){
this.defaults = {
title:"",
topT:"提示",
btnOk:"确定",
btnNo:"取消",
btnConfirm:"",
callback:null
},
this.options = $.extend({}, this.defaults, options);
};
ConfirmBox.prototype = {
constructor: ConfirmBox,
boxOpen:function(){
var teml = "";
teml=teml+'<div id="opp">';
teml=teml+'<div class="opBox js-opBox">';
teml=teml+' <div class="opBoxHead"><i class="icon f16">x</i> '+this.options.topT+'</div>';
teml=teml+' <div class="opBoxCont">';
teml=teml+' <p id="#msgC">'+this.options.title+'</p>';
teml=teml+' </div>';
teml=teml+' <div class="opBoxBot disbox">';
if(this.options.btnConfirm!=""){
teml=teml+' <a href="javascript:;" class="btn-ok">'+this.options.btnConfirm+'</a>';
}else{
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>';
}
teml=teml+' </div>';
teml=teml+'</div>';
teml=teml+'<div class="mybg js-mybg" style="display:block;z-index:2200"></div>';
teml=teml+'</div>'; if($(".js-opBox").length===0){
$("body").append(teml);
}else{
$(".js-opBox #msgC").html(this.options.title);
}
this.bindEvent();
},
bindEvent:function(){
var that = this;
$(".btn-ok").on("click",function(){
if(typeof (that.options.callback)=="function"){
that.options.callback();
}
});
$(".btn-cancel").on("click",function(){
that.boxClose();
});
},
boxClose:function(){
$("#opp").remove()
}
};
window.ConfirmBox = ConfirmBox;
}());

/* 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&period;0&period;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. Html5 Canvas transform setTransform

    Html5 Canvas transform就是矩阵变换,一种坐标的变形. 坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到. tran ...

  2. Communication - 03&period;RILC

    RIL层的作用大体上就是将上层的命令转换成相应的AT指令,控制modem工作.生产modem的厂家有很多:Qualcomm, STE, Infineon... 不同的厂家都有各自的特点,当然也会有各自 ...

  3. 【leetcode】Palindrome Partitioning II

    Palindrome Partitioning II Given a string s, partition s such that every substring of the partition ...

  4. 经历:easyui的datagrid没有数据滚动条的显示

    今天,一个用户提出一个这样的问题,"查询不到结果时,为什么我看不到后面的标题呢?" 最初,我听到这个问题时,第一反应是:查出来数据不就有滚动条了吗,干嘛非要较真呢? 不过,后来想想 ...

  5. C&num; 精准获取代码运行时间

    纯粹转载,转载请注明参考链接及作者! 参考链接:http://www.cnblogs.com/ret00100/archive/2010/08/06/1793680.html,作者:博客园 大佬辉   ...

  6. grep详解

    一.简介 Global Regular Expression Print,是一种强大的文本搜索工具,能使用正则表达式. 二.语法 grep [OPTIONS] PATTERN [FILE...]gre ...

  7. WCF部署到IIS异常&lpar;详细&colon; 不能加载类型System&period;ServiceModel&period;Activation&period;HttpModule &rpar;

    未能从程序集“System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”中加载类型“ ...

  8. KMP算法之查找模式串在源串中出现的次数

    问题描述: 给定两个字符串T, P.查找字符串P在字符串T中出现的次数. 解决方法: 典型的KMP算法的题目,在此使用的KMP算法为算法导论上介绍的算法.下一篇文章将详细介绍KMP算法的计算过程. 题 ...

  9. BZOJ&period;3653&period;谈笑风生&lpar;长链剖分&sol;线段树合并&sol;树状数组&rpar;

    BZOJ 洛谷 \(Description\) 给定一棵树,每次询问给定\(p,k\),求满足\(p,a\)都是\(b\)的祖先,且\(p,a\)距离不超过\(k\)的三元组\(p,a,b\)个数. ...

  10. 雷林鹏分享:XML 相关技术

    XML 相关技术 下面是一个 XML 技术的列表. XHTML (可扩展 HTML) 更严格更纯净的基于 XML 的 HTML 版本. XML DOM (XML 文档对象模型) 访问和操作 XML 的 ...