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 提供您的访客熟悉和直观的界面,使他们能够与您的移动网站上的图像进行交 ...
随机推荐
- 使用java 程序创建格式为utf-8文件的方法(写入和读取json文件)
使用java 程序创建格式为utf-8文件的方法: try{ File file=new File("C:/11.jsp"); ...
- 用SQLSERVER里的bcp命令或者bulkinsert命令也可以把dat文件导入数据表
用SQLSERVER里的bcp命令或者bulkinsert命令也可以把dat文件导入数据表 下面的内容的实验环境我是在SQLSERVER2005上面做的 之前在园子里看到两篇文章<C# 读取纯真 ...
- C#通过反射获取上层调用方法信息
System.Diagnostics.StackFrame frame = ); System.Reflection.MethodBase method = frame.GetMethod(); st ...
- 将doc文件批量转为pdf文件
需要将不少doc文件转为pdf,WPS带有这种功能,但是鼠标点击次数太多以后整个人都变得很烦躁 用了一下午去搜这方面的工具软件,找到若干.有一些免费,有一些试用的,但总归就找到一个真正能用,虽说生成的 ...
- Javascript之document对象用法（很重要）
一.找到元素 document.getElementById("id"):根据id找层,最多找一个 var a=document.getElementById("id&q ...
- CentOS Minimal版最小化安装后VMware联网详解
最近想搞个mailman邮件列表,又不想在我常用的CentOS 6.4上做实验,怕破坏了环境,于是就想装个试验机,又嫌它占空间太大,于是找了半天发现CentOS 6.0的minimal版本最适合了,装 ...
- PHP读取大文件的几种方法介绍
读取大文件一直是一个头痛的问题,我们像使用php开发读取小文件可以直接使用各种函数实现,但一到大文章就会发现常用的方法是无法正常使用或时间太长太卡了,下面我们就一起来看看关于php读取大文件问题解决办 ...
- 最值得收藏的Bootstrap资源网站
如果你正在寻找Bootstrap图标,那今天的推荐对你而言绝对非常重要!在这篇内容中,我们把这套框架上的免费字体图 标做了个整合(当然,以后还会不断的更新).正如你所知,图标字体在一个web网页设计拥 ...
- paip.提升稳定性---c3p0数据库连接池不能取到连接An attempt by a client to checkout a Connection has timed out
paip.提升稳定性---c3p0数据库连接池不能取到连接An attempt by a client to checkout a Connection has timed out 作者Attilax ...
- 使用vs自带的性能诊断工具
visual studio是个强大的集成开发环境,内置了程序性能诊断工具.下面通过两段代码进行介绍. static void Main( string[] args) { Test1(); Test2 ...