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 提供您的访客熟悉和直观的界面,使他们能够与您的移动网站上的图像进行交 ...
随机推荐
- Sqoop2 环境搭建
原文地址:http://www.cnblogs.com/luogankun/p/4209017.html 正在准备做Spark SQL external data source与关系型数据库交互的部分 ...
- 用SQL语句断开某个数据库的所有活动连接
每次一执行完一个数据库脚本,想要做一些别的操作的时候(比如还原数据库),老是有数据库活动连接,烦不胜烦(如下图所示). 下面给出一种删除数据库活动连接的方式.将下面代码段中的“--修改一下”处的数据库 ...
- [安卓] 7、页面跳转和Intent简单用法
这里有一个layout资源,2个activity.首先在MainActivity.java中实例化按钮和添加按钮监听绑定都是我们知道的,这里要注意的是第22行Intent intent = new I ...
- [ACM_搜索] POJ 1096 Space Station Shielding （搜索 + 洪泛算法Flood_Fill）
Description Roger Wilco is in charge of the design of a low orbiting space station for the planet Ma ...
- JPA 使用
本文以JPA+Hibernate 角色与权限示例说明. 角色实体定义: @Entity @Table public class Role { private long id; private Stri ...
- 无线客户端框架设计（4）：自定义生命周期的设计（iOS篇）
首先要确定一点,我们的App,要基于XIB文件进行编程,而不是在每个相应的ViewController里面去手动创建页面的每个控件.这样做的好处是,将页面布局与业务逻辑彻底隔离.于是我们可以把xib的 ...
- centos网卡错误Device eth0 does not seem to be present
在使用vmware及VirtualBox迁移linux系统过程中,发现部署后的linux系统无法启动网卡 报错为 Bringing up interface eth0: Device eth0 doe ...
- beego中orm关联查询使用解析
这两天在学习beego框架,之前学习的时候遗漏了很多东西,比如orm.缓存.应用监控.模板处理等,这里将通过实例记录下如何使用beego自带的orm进行关联查询操作. 首先说明下,beego的orm有 ...
- PHP学习计划
- Thinkphp下嵌套UEditor富文本WEB编辑器
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 本文实际操作于ThinkPHP框架下,现 ...