JS实现IOS风格对话框 jquery / zepto
2015-09-15 13:50
597 查看
Alert
Alert 自定义参数
Confirm
Confirm 自定义参数
Prompt
Prompt自定义
// /*
* 对话框插件
* 赵欢磊 20150915
*/
var dialog = {
//对话框
alert: function (obj, callback) {
var content = obj.content || obj || "",
btnText = obj.btnText || "确定",
boxClass = obj.boxClass || "",
alertHtml = '\
\
\
' + content + '\
\
' + btnText + '\
\
\
\
';
//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 = '\
\
\
' + content + '\
\
' + cancelText + '\
' + okText + '\
\
\
\
';
$(".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 || 2000,
msgHtml = '' + content + '';
$(".prompt").remove();
$("body").append(msgHtml);
var prompt = $(".prompt"),
promptWidth = prompt.width();
prompt.css({"margin-left": -promptWidth / 2});
setTimeout(function () {
prompt.css({ "opacity": 0});
setTimeout(function () {
prompt.remove();
if (callback) {
callback();
}
}, 500);
}, delay);
}
};
//替换系统默认对话框
window.alert = dialog.alert;
window.confirm = dialog.confirm;
window.prompt = dialog.prompt;
// ]]>
// 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: "
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: 5000,
boxClass: "prompt-red" //这里可以自定义样式，如：字体、背景色等。
});
};
// ]]>
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" //这里可以自定义样式，如：字体、背景色等。
});
};// /*
* 对话框插件
* 赵欢磊 20150915
*/
var dialog = {
//对话框
alert: function (obj, callback) {
var content = obj.content || obj || "",
btnText = obj.btnText || "确定",
boxClass = obj.boxClass || "",
alertHtml = '\
\
\
' + content + '\
\
' + btnText + '\
\
\
\
';
//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 = '\
\
\
' + content + '\
\
' + cancelText + '\
' + okText + '\
\
\
\
';
$(".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 || 2000,
msgHtml = '' + content + '';
$(".prompt").remove();
$("body").append(msgHtml);
var prompt = $(".prompt"),
promptWidth = prompt.width();
prompt.css({"margin-left": -promptWidth / 2});
setTimeout(function () {
prompt.css({ "opacity": 0});
setTimeout(function () {
prompt.remove();
if (callback) {
callback();
}
}, 500);
}, delay);
}
};
//替换系统默认对话框
window.alert = dialog.alert;
window.confirm = dialog.confirm;
window.prompt = dialog.prompt;
// ]]>
// 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: "
自定义参数confirm弹窗
",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: 5000,
boxClass: "prompt-red" //这里可以自定义样式，如：字体、背景色等。
});
};
// ]]>
20151013更新
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS仿IOS风格对话框 jquery / zepto</title>
<style>
/*对话框*/
.dialog {width:100%;height:100%;position:fixed;top:0;left:0;z-index:1000;}
.dialog-overlay {width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:#000;opacity:.7;filter:alpha(opacity:70);}
.dialog-box {width:80%;position:absolute;top:50%;left:50%;margin:-80px 0 0 -40%;z-index:2;background-color:#fff;border-radius:5px;text-align:center;}
.dialog-detail {padding:30px 20px;font-size:16px;line-height:1.5;}
.dialog-opera {width:100%;height:50px;box-shadow:0 1px 1px -1px #888 inset;}
.dialog-btn {height:50px;border:none;background:none;color:#157efb;font-size:15px;line-height:50px;cursor:pointer;}
.dialog-btn-close {width:100%;}
.dialog-btn-cancel, .dialog-btn-ok {width:50%;float:left;}
.dialog-btn-ok {box-shadow:-1px 0 1px -1px #888;}
.prompt {max-width:50%;position:fixed;top:45%;left:50%;z-index:1000;padding:15px 20px;background-color:rgba(0,0,0,.8);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: 5000,
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 || 2000,
msgHtml = '<div class="prompt ' + boxClass + '">' + content + '</div>';
$(".prompt").remove();
$("body").append(msgHtml);
var prompt = $(".prompt"),
promptWidth = prompt.width();
prompt.css({"margin-left": -promptWidth / 2});
setTimeout(function () {
prompt.css({ "opacity": 0});
setTimeout(function () {
prompt.remove();
if (callback) {
callback();
}
}, 500);
}, 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: 5000,
boxClass: "prompt-red" //这里可以自定义样式，如：字体、背景色等。
});
};
</script>
</body>
</html>第1版：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS仿IOS风格对话框</title>
<style>
/*对话框*/
.dialog {width:100%;height:100%;position:fixed;top:0;left:0;z-index:1000;}
.dialog-overlay {width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:#000;opacity:.7;filter:alpha(opacity:70);}
.dialog-box {width:80%;position:absolute;top:50%;left:50%;margin:-80px 0 0 -40%;z-index:2;background-color:#fff;border-radius:5px;text-align:center;}
.dialog-detail {padding:30px 20px;font-size:20px;line-height:1.5;}
.dialog-opera {width:100%;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:100%;}
.dialog-btn-cancel, .dialog-btn-ok {width:50%;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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery常用案例
- Jquery动态操作checkbox
- jquery实现全选和全不选
- 基于jQuery倾斜打开侧边栏菜单特效代码
- Intel项目所用jquery小知识点总结
- 基于jQuery滑动杆实现购买日期选择效果
- jQuery整理笔记文件夹
- Jquery的跨域调用
- jQuery简单实现两级下拉菜单效果代码
- HTML5,Javascript,and jQuery 24-Hour Trainer(2)——一些简单的tag
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
- 使用JQuery插件Pinto 和Lightbox 制作带网格布局的响应式(Responsible)画廊(gallery)
- Jquery Md5加密解密
- JQuery中的extend函数
- jquery 1.9里面已经删除了toggle（fn1, fn2）函数
- jquery selector
- jQuery ajax走error的原因
- 【jQuery】总结:筛选器、控制隐藏、操作元素style属性
- jQuery Easing 使用方法及其图解
- jquery笔记