手机移动端confirm替换方案
- //弹框
- ;(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替换方案的更多相关文章
- 手机移动端alert替换方案
//alert ;(function () { var AlertBox = function (options){ this.defaults = { title:"", cal ...
- 基于XMPP协议的手机多方多端即时通讯方案
一.开发背景 1.国际背景 随着Internet技术的高速发展,即时通信已经成为一种广泛使用的通信方式.1996年Mirabilis公司推出了世界上第一个即时通信系统ICQ,不到10年间,即时通信(I ...
- Weex详解:灵活的移动端高性能动态化方案
原文地址:http://www.infoq.com/cn/articles/introducing-weex 在2016年4月份的QCon上,阿里巴巴资深总监,淘宝移动平台及新业务事业部.阿里百川负责 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 深度揭秘阿里移动端高性能动态化方案Weex
2016年Qcon大会首日,阿里巴巴资深总监.淘宝移动平台.阿里百川负责人庄卓然宣布移动端高性能动态化方案Weex即时内测,并将于6月开源.此消息一出,群情汹涌,在座的程序猿.攻城狮们纷纷拿起手机扫码 ...
- 移动端性能监控方案Hertz
移动端性能监控方案Hertz 吴凯 瑞利 富强 徐宏 ·2016-12-19 16:10 性能问题是造成App用户流失的罪魁祸首之一.App的性能问题包括崩溃.网络请求错误或超时.响应速度慢.列表滚动 ...
- Google Earth API 替换方案
众所周知,GE API将会在15年12月25日结束服务,对于众多采用该API的软件,需要一些替换方案. 例如google map或者cesiumjs http://cesiumjs.org/ 或者尝试 ...
- 【多端应用开发系列0.0.0——之总序】xy多端应用开发方案定制
[目录] 0.0.0 [多端应用开发系列之总序]服务器Json数据处理——Json数据概述 0.0.0 [因] 正在学习多客户端应用开发,挖个坑,把所用到的技术方案,用最简单直白的语言描述出来,写成一 ...
- 【转载】jQuery手机移动端触屏日历日期选择
文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...
随机推荐
- Spring+springmvc+Mybatis整合案例 annotation版(myeclipse)详细版
Spring+springmvc+Mybatis整合案例 Version:annotation版 文档结构图: 从底层开始做起: 01.配置web.xml文件 <?xml version=&qu ...
- 关于NIO
操作系统的IO控制 在整个IO控制方式的发展过程中,始终贯穿着这样一条宗旨:即尽量减少主机对IO控制的干预,把主机从繁杂的IO控制事务中解脱出来,以便更多地去完成数据处理任务.为了缓和高速CPU和IO ...
- 从SQL下载大量数据到Excel
之前不知设计原理,发生了大量数据(超过100w行)直接从数据库读取加载到网页中,直接导致内存溢出. Rediculous! 所以,现在改为分页查询到页面中. 由于其有全局逻辑,故折中每次加载1w条数据 ...
- Appium移动自动化测试之问题总结
1.运行该测试用例,报如下错误 java.lang.NoSuchMethodError: org.openqa.selenium.remote.ErrorHandler.<init>(Lo ...
- 如何取消MSSQL自带智能提示步骤,使用第三方智能提示插件
步骤1如下: [工具]——[选项]——[文本编辑器]——[Transact-SQL]——[IntelliSense]——[Transact-SQL IntelliSense 设置]——(取消选择)—— ...
- UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等
(1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩 ...
- Zookeeper的基础知识
1.Zookeeper是什么? 引用官方的说法:“Zookeeper是一个高性能,分布式的,开源分布式应用协调服务.它提供了简单原始的功能,分布式应用可以基于它实现更高级 的服务.它被设计为易于编程, ...
- Calculating Stereo Pairs
Calculating Stereo Pairs Written by Paul BourkeJuly 1999 Introduction The following discusses comput ...
- gerrit 部署手册
概述 gerrit是谷歌开发用于安卓系统的代码审查的系统,目前已经开源.gerrti使用简单并友好.这里记录了gerrti的部署方法以及其中可能存在的陷阱和问题. 创建专属系统用户 Gerrit co ...
- Java多线程开发技巧
很多开发者谈到Java多线程开发,仅仅停留在new Thread(...).start()或直接使用Executor框架这个层面,对于线程的管理和控制却不够深入,通过读<Java并发编程实践&g ...