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 提供您的访客熟悉和直观的界面,使他们能够与您的移动网站上的图像进行交 ...
随机推荐
- 解决：Could not load type 'System.ServiceModel.Activation.HttpModule' from assemb
解决:Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceMode ...
- C# ADO.NET SqlDataAdapter中传递参数
ADO.NET的SQL语句中,往往不是静态的语句,而是需要接受传递过来的参数,比如典型的登录功能,需要查找指定的用户名: string sqlQuery = "SELECT * FROM W ...
- 阿里云中Centos下配置防火墙
一.检查iptables服务状态 [root@woxplife ~]# service iptables status iptables: Firewall is not running. 说明ipt ...
- Ubuntu配置git
安装ssh sudo apt-get install openssh-server sudo apt-get install openssh-client 启动SSH服务 sudo /etc/init ...
- 我的fckeditor实践
一开始我不懂这个ConnectorServlet是何用处,后来发现是专门用于文件上传的,因为fckeditor默认是不支持这个功能的. ConnectorServlet: /* * FCKeditor ...
- JavaScript 火的有点过头了，但又能火多久呢？
2016年的前端是遍地开花的一年,各种前端框架,各种库,学都学不完,反正在前端的世界里,没有什么是JavaScript实现不了的... JavaScript 你还能再火几年?? 前些年node被捧上天 ...
- CSS扇形展开效果
知识点预备: [1]CSS3中特别重要的transform中的rotate(),现在transform可以将元素进行2D和3D变形. 2D transform常用的transform-function ...
- atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 。打开浏览服务器文件夹java .net php
atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 .打开浏览服务器文件夹java .net php 1. 环境:::项目java web,需要打开浏览服 ...
- atitit. 日志系统的原则and设计and最佳实践(1)-----原理理论总结.
atitit. 日志系统的原则and设计and最佳实践总结. 1. 日志系统是一种不可或缺的单元测试,跟踪调试工具 1 2. 日志系统框架通常应当包括如下基本特性 1 1. 所输出的日志拥有自己的分类 ...
- paip.调试js 查看元素事件以及事件断点
paip.调试js 查看元素事件以及事件断点 ff 26 +firebug 查看不出来.. 360 ,虽然也是chrome 基础,但是开发工具烂阿,也是显示不出来.. 作者Attilax 艾龙, ...