JS实现IOS风格对话框 jquery / zepto
Alert
alert("这个是一个alert弹窗");
Alert 自定义参数
alert({
content: "自定义alert弹窗",
btnText: "OK",
boxClass: "custom-alert"
}, function () {
console.log("good！");
});
Confirm
confirm("这个是一个confirm弹窗", function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
Confirm 自定义参数
confirm({
content: "自定义参数confirm弹窗",
okText: "OK",
cancelText: "cancen",
boxClass: "custom-confirm"
}, function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
Prompt
prompt("今天天气不错啊！");
Prompt自定义
document.getElementById("bn-prompt2").onclick = function () {
prompt({
content: "明天的天气也应该不错",
delay: 5000,
boxClass: "prompt-red" //这里可以自定义样式，如：字体、背景色等。
});
};
20151013更新
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS仿IOS风格对话框 jquery / zepto</title>
<style>
/*对话框*/
.dialog {width:%;height:%;position:fixed;top:;left:;z-index:;}
.dialog-overlay {width:%;height:%;position:absolute;top:;left:;z-index:;background-color:#;opacity:.;filter:alpha(opacity:);}
.dialog-box {width:%;position:absolute;top:%;left:%;margin:-80px -%;z-index:;background-color:#fff;border-radius:5px;text-align:center;}
.dialog-detail {padding:30px 20px;font-size:16px;line-height:1.5;}
.dialog-opera {width:%;height:50px;box-shadow: 1px 1px -1px # inset;}
.dialog-btn {height:50px;border:none;background:none;color:#157efb;font-size:15px;line-height:50px;cursor:pointer;}
.dialog-btn-close {width:%;}
.dialog-btn-cancel, .dialog-btn-ok {width:%;float:left;}
.dialog-btn-ok {box-shadow:-1px 1px -1px #;}
.prompt {max-width:%;position:fixed;top:%;left:%;z-index:;padding:15px 20px;background-color:rgba(,,,.);color:#fff;border-radius:5px;line-height:1.4;font-size:14px;transition:opacity .5s;}
</style>
</head> <body> <p><button id="bn-alert">Alert</button></p>
<pre>
alert("这个是一个alert弹窗");
</pre>
<p> </p> <p><button id="bn-alert2">Alert 自定义参数</button></p>
<pre>
alert({
content: "自定义alert弹窗",
btnText: "OK",
boxClass: "custom-alert"
}, function () {
console.log("good！");
});
</pre>
<p> </p> <p><button id="bn-confirm">Confirm</button></p>
<pre>
confirm("这个是一个confirm弹窗", function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
</pre>
<p> </p> <p><button id="bn-confirm2">Confirm 自定义参数</button></p>
<pre>
confirm({
content: "自定义参数confirm弹窗",
okText: "OK",
cancelText: "cancen",
boxClass: "custom-confirm"
}, function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
</pre> <p><button id="bn-prompt">Prompt</button></p>
<pre>
prompt("今天天气不错啊！");
</pre> <p><button id="bn-prompt2">Prompt自定义</button></p>
<pre>
document.getElementById("bn-prompt2").onclick = function () {
prompt({
content: "明天的天气也应该不错",
delay: ,
boxClass: "prompt-red" //这里可以自定义样式，如：字体、背景色等。
});
};
</pre> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script> /*
* 对话框插件
* 赵欢磊 20150915
*/ var dialog = { //对话框
alert: function (obj, callback) {
var content = obj.content || obj || "",
btnText = obj.btnText || "确定",
boxClass = obj.boxClass || "",
alertHtml = '\
<div class="dialog '+ boxClass +'">\
<div class="dialog-box">\
<div class="dialog-detail">' + content + '</div>\
<div class="dialog-opera">\
<button class="dialog-btn dialog-btn-close">' + btnText + '</button>\
</div>\
</div>\
<div class="dialog-overlay"></div>\
</div>';
//document.body.insertAdjacentHTML("beforeend", alertHtml);
$(".dialog").remove();
$("body").append(alertHtml);
var dialog = $(".dialog"),
btnClose = $(".dialog-btn-close");
btnClose.on("click", function () {
dialog.remove();
if (callback) {
callback();
}
});
},
confirm: function (obj, callback) {
var content = obj.content || obj || "",
okText = obj.okText || "确定",
cancelText = obj.cancelText || "取消",
boxClass = obj.boxClass || "",
confirmHtml = '\
<div class="dialog '+ boxClass +'">\
<div class="dialog-box">\
<div class="dialog-detail">' + content + '</div>\
<div class="dialog-opera">\
<button class="dialog-btn dialog-btn-cancel">' + cancelText + '</button>\
<button class="dialog-btn dialog-btn-ok">' + okText + '</button>\
</div>\
</div>\
<div class="dialog-overlay"></div>\
</div>';
$(".dialog").remove();
$("body").append(confirmHtml);
var dialog = $(".dialog"),
btnOk = $(".dialog-btn-ok"),
btnCancel = $(".dialog-btn-cancel"),
flag = true,
oprea = function () {
dialog.remove();
if (callback) {
callback(flag);
}
};
btnOk.on("click", function () {
flag = true;
oprea();
});
btnCancel.on("click", function () {
flag = false;
oprea();
});
},
prompt: function (obj, callback) {
var content = obj.content || obj || "",
boxClass = obj.boxClass || "",
delay = obj.delay || ,
msgHtml = '<div class="prompt ' + boxClass + '">' + content + '</div>';
$(".prompt").remove();
$("body").append(msgHtml);
var prompt = $(".prompt"),
promptWidth = prompt.width();
prompt.css({"margin-left": -promptWidth / });
setTimeout(function () {
prompt.css({ "opacity": });
setTimeout(function () {
prompt.remove();
if (callback) {
callback();
}
}, );
}, delay);
} }; //替换系统默认对话框
window.alert = dialog.alert;
window.confirm = dialog.confirm;
window.prompt = dialog.prompt;
</script> <script>
document.getElementById("bn-alert").onclick = function () {
alert("这个是一个alert弹窗");
};
document.getElementById("bn-alert2").onclick = function () {
alert({
content: "自定义alert弹窗",
btnText: "OK",
boxClass: "custom-alert"
}, function () {
console.log("good！");
});
};
document.getElementById("bn-confirm").onclick = function () {
confirm("这个是一个confirm弹窗", function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
};
document.getElementById("bn-confirm2").onclick = function () {
confirm({
content: "<h2>自定义参数confirm弹窗</h2>",
okText: "OK",
cancelText: "cancen",
boxClass: "custom-confirm"
}, function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
}; document.getElementById("bn-prompt").onclick = function () {
prompt("今天天气不错啊！");
}; document.getElementById("bn-prompt2").onclick = function () {
prompt({
content: "明天的天气也应该不错",
delay: ,
boxClass: "prompt-red" //这里可以自定义样式，如：字体、背景色等。
});
}; </script> </body>
</html>
第1版：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS仿IOS风格对话框</title>
<style>
/*对话框*/
.dialog {width:%;height:%;position:fixed;top:;left:;z-index:;}
.dialog-overlay {width:%;height:%;position:absolute;top:;left:;z-index:;background-color:#;opacity:.;filter:alpha(opacity:);}
.dialog-box {width:%;position:absolute;top:%;left:%;margin:-80px -%;z-index:;background-color:#fff;border-radius:5px;text-align:center;}
.dialog-detail {padding:30px 20px;font-size:20px;line-height:1.5;}
.dialog-opera {width:%;border-top:1px solid #ddd;}
.dialog-btn {height:50px;border:none;background:none;color:#157efb;font-size:18px;line-height:50px;cursor:pointer;}
.dialog-btn-close {width:%;}
.dialog-btn-cancel, .dialog-btn-ok {width:%;float:left;}
.dialog-btn-ok {border-left:1px solid #ddd;box-sizing:border-box;}
</style>
</head> <body> <p><button id="bn-alert">Alert</button></p>
<pre>
alert("这个是一个alert弹窗");
</pre>
<p> </p> <p><button id="bn-alert2">Alert 自定义参数</button></p>
<pre>
alert({
content: "自定义alert弹窗",
btnText: "OK",
boxClass: "custom-alert"
}, function () {
console.log("good！");
});
</pre>
<p> </p> <p><button id="bn-confirm">Confirm</button></p>
<pre>
confirm("这个是一个confirm弹窗", function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
</pre>
<p> </p> <p><button id="bn-confirm2">Confirm 自定义参数</button></p>
<pre>
confirm({
content: "自定义参数confirm弹窗",
okText: "OK",
cancelText: "cancen",
boxClass: "custom-confirm"
}, function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
</pre> <script> /*
* 对话框插件
* 赵欢磊 20150915
*/ var dialog = { //对话框
alert: function (elem, callback) {
var content = elem.content || elem || "",
btnText = elem.btnText || "确定",
boxClass = elem.boxClass || "",
alertHtml = '\
<div class="dialog '+ boxClass +'">\
<div class="dialog-box">\
<div class="dialog-detail">' + content + '</div>\
<div class="dialog-opera">\
<button class="dialog-btn dialog-btn-close">' + btnText + '</button>\
</div>\
</div>\
<div class="dialog-overlay"></div>\
</div>';
document.body.insertAdjacentHTML("beforeend", alertHtml);
var dialog = document.querySelector(".dialog"),
btnClose = dialog.querySelector(".dialog-btn-close");
btnClose.onclick = function () {
dialog.remove();
if (callback) {
callback();
}
};
},
confirm: function (elem, callback) {
var content = elem.content || elem || "",
okText = elem.okText || "确定",
cancelText = elem.cancelText || "取消",
boxClass = elem.boxClass || "",
confirmHtml = '\
<div class="dialog '+ boxClass +'">\
<div class="dialog-box">\
<div class="dialog-detail">' + content + '</div>\
<div class="dialog-opera">\
<button class="dialog-btn dialog-btn-cancel">' + cancelText + '</button>\
<button class="dialog-btn dialog-btn-ok">' + okText + '</button>\
</div>\
</div>\
<div class="dialog-overlay"></div>\
</div>';
document.body.insertAdjacentHTML("beforeend", confirmHtml);
var dialog = document.querySelector(".dialog"),
btnOk = dialog.querySelector(".dialog-btn-ok"),
btnCancel = dialog.querySelector(".dialog-btn-cancel"),
flag = true,
result = function () {
dialog.remove();
if (callback) {
callback(flag);
}
};
btnOk.onclick = function () {
flag = true;
result();
};
btnCancel.onclick = function () {
flag = false;
result();
};
} }; //替换系统默认对话框
window.alert = dialog.alert;
window.confirm = dialog.confirm;
</script> <script>
document.getElementById("bn-alert").onclick = function () {
alert("这个是一个alert弹窗");
};
document.getElementById("bn-alert2").onclick = function () {
alert({
content: "自定义alert弹窗",
btnText: "OK",
boxClass: "custom-alert"
}, function () {
console.log("good！");
});
};
document.getElementById("bn-confirm").onclick = function () {
confirm("这个是一个confirm弹窗", function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
};
document.getElementById("bn-confirm2").onclick = function () {
confirm({
content: "<h2>自定义参数confirm弹窗</h2>",
okText: "OK",
cancelText: "cancen",
boxClass: "custom-confirm"
}, function (flag) {
if (flag) {
alert("你点了确定");
} else {
alert("你点了取消");
}
});
}; </script> </body>
</html>
JS实现IOS风格对话框 jquery / zepto的更多相关文章
- 使用 iosOverlay.js 创建 iOS 风格的提示和通知
iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...
- 使用jQuery开发iOS风格的页面导航菜单
在线演示1 本地下载 申请达人,去除赞助商链接 iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航. HTML代码 我们 ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- 5分钟搞定jQuery+zepto.js+面向对象插件
今天分享一下快速使用jQuery+zepto.js的技巧,需要的记得收藏 1.jQuery的引入:本地下载jQuery(后面简称jq)的源文件,开发版本使用非min版,线上使用min版,zepto.j ...
- delaycall.js 修改表单延迟自动提交的 jQuery / Zepto 插件
delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. Git ...
- 对话框 自定义 IOS风格 包青天
activity private void showDialog1() { message = "您输入的邮箱后缀不是公司邮箱地址\n将导致您的借款审核不通过,请重新 ...
- jquery简易版xwPop.js弹出消息对话框插件
xwPop.js弹出消息对话框插件是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹出对话框,它提供各种参数和方法,功能非常强大.目前已经在项目中有应用到xwpop开发 ...
- 构建 iOS 风格移动 Web 应用程序的8款开发框架
使用 HTML5,CSS3 和 JavaScript 开发移动应用经过实践证明是一种可行的方式.这里收录了几款 iOS 风格的手机应用程序开发框架,帮助您使用擅长的 Web 技术来开发移动应用程序.这 ...
- PhotoSwipe - 移动开发必备的 iOS 风格相册
PhotoSwipe 是一个专门针对移动设备的图像画廊,它的灵感来自 iOS 的图片浏览器和谷歌移动端图像. PhotoSwipe 提供您的访客熟悉和直观的界面,使他们能够与您的移动网站上的图像进行交 ...
随机推荐
- 移动App的REST API设计实践
原文:http://www.jianshu.com/p/23cccb3a90b1 通讯协议 一些只是对服务器数据进行CRUD操作的App,通常采用HTTP协议,为了安全也可以采用HTTPS协议.IM软 ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- libevent （二） 接收TCP连接
libevent 接收TCP连接 Evconnlistener 机制为您提供了侦听和接受传入的 TCP 连接的方法.下面的函数全部包含在`<event2/listener.h>`中. ev ...
- WEBAPP开发技巧总结
自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机 ...
- 《介绍一款开源的类Excel电子表格软件》续：七牛云存储实战（C#）
两个月前的发布的博客<介绍一款开源的类Excel电子表格软件>引起了热议:在博客园有近2000个View.超过20个评论. 同时有热心读者电话咨询如何能够在SpreadDesing中实现存 ...
- EF结合三层：三层中数据层父类和业务层父类的使用
今天我们主要讨论下数据层父类和业务层父类的使用.众所周知,数据层无非就是实现增删改查的方法.无论是哪个实体类,无非就是为了实现增删改查方法,所有我们在三层的DAL层封装了一个BaseDAL类,来做增删 ...
- JProfiler使用详细教程学习笔记
JProfiler学习笔记 推荐文章:JProfiler 入门教程 一.安装JProfiler 从http://www.ej-technologies.com/下载5.1.2并申请 ...
- atitit.客户端连接oracle数据库的方式总结
客户端连接oracle数据库的方式总结 目录 Java程序连接一般使用jar驱动连接..... 桌面GUI一般采取c语言驱动oci.dll 直接连接... 间接连接(需要配置tns及其envi var ...
- 看2016上半年O2O新风向，太阳终会穿破乌云
纵观我国的O2O行业发展历程,去年上半年还处于资本的投资热潮,下半年就遭遇到了寒冬的突袭,使得很多才刚刚发芽的O2O企业直接被一阵寒风给吹倒.但同样的,一阵风浪过后才知道在O2O这片战场上谁才是有实力 ...
- ubuntu上安装mysql 编译安装
为什么要折腾?首先说明的是ubuntu上安装mysql等软件是非常容易简单的,其简单的程度盖过windows上的安装,一句sudo apt-get install就可以搞定.如果想用最简便的方法安装m ...