<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="jQueryConfirmTips/jQueryConfirmTips.css" />
<script type="text/javascript" src="jQueryConfirmTips/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jQueryConfirmTips/jQueryConfirmTips.js"></script>
<style type="text/css">
#divButton {
width:900px;padding:20px;margin:auto;background:#99ffff;font-size:0px;user-select:none;-webkit-user-select:none;
}
#divButton button {
width:160px;background:#0099ff;border:none;border-radius:5px;padding:10px 0px;margin:10px;font-size:16px;color:#fff;font-weight:bold;cursor:pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function(e){
/**
* txt : 显示的字符串
* options ：定义提示的样式
* - tType : 提示类型 info|alert|confirm|prompt|default
* - autoHide : 是否自动关闭 false|true
* - clickHide : 是否点击遮罩层关闭 false|true
* - icon : 图标 y|[自定义],取y时,随tType自动取值
* - value : 类型tType为prompt时,输入框中的默认值
* - fadeTime : 类型tType为default时,渐显/渐隐时间(毫秒)
* - stayTime : 类型tType为default时,显示时间(毫秒)
* - pos : 提示所在窗口位置 top|up|middle|down|bottom|[自定义],默认middle,自定义:margin的值 例:100px auto(即:margin:100px auto)
* - callBack : 回调函数,点击按钮返回值:prompt:$input.val(),confirm:true|false
*/
$("#btnInfo").click(function(e){
confirmTips("info", {
tType : "info",
clickHide : true,
icon : "y"
});
});
$("#btnInfoCustom").click(function(e){
confirmTips("info custom", {
tType : "info",
icon : "a.png"
});
});
$("#btnAlert").click(function(e){
confirmTips("alert", {
tType : "alert"
});
});
$("#btnAlertCustom").click(function(e){
confirmTips("alert custom", {
tType : "alert",
icon : "a.png"
});
});
$("#btnConfirm").click(function(e){
confirmTips("confirm", {
tType : "confirm",
callBack : function(res){
console.log(res);
}
});
});
$("#btnConfirmCustom").click(function(e){
confirmTips("confirm custom", {
tType : "confirm",
icon : "y",
callBack : function(res){
console.log(res);
}
});
});
$("#btnPrompt").click(function(e){
confirmTips("prompt", {
tType : "prompt",
callBack : function(res){
console.log(res);
}
});
});
$("#btnPromptCustom").click(function(e){
confirmTips("prompt custom", {
tType : "prompt",
icon : "y",
callBack : function(res){
console.log(res);
}
});
});
$("#btnDefault").click(function(e){
confirmTips("default", {
fadeTime : 100,
stayTime : 2000
});
});
$("#btnDefaultCustom").click(function(e){
confirmTips("default", {
icon : "y",
fadeTime : 500,
stayTime : 5000,
callBack : function(res){
console.log(res);
}
});
});
});
</script>
</head>
<body>
<div id="divButton">
<button type="button" id="btnInfo">info</button>
<button type="button" id="btnInfoCustom">info custom</button>
<button type="button" id="btnAlert">alert</button>
<button type="button" id="btnAlertCustom">alert custom</button>
<button type="button" id="btnConfirm">confirm</button>
<button type="button" id="btnConfirmCustom">confirm custom</button>
<button type="button" id="btnPrompt">prompt</button>
<button type="button" id="btnPromptCustom">prompt custom</button>
<button type="button" id="btnDefault">default</button>
<button type="button" id="btnDefaultCustom">default custom</button>
</div>
</body>
</html>
jQuery模拟alert confirm prompt等
需积分: 12 11 浏览量
2015-11-06
16:01:28
上传
评论
收藏 984KB ZIP 举报
jQueryConfirmTips.zip （10个子文件） 
jQueryConfirmTips.html 4KB
jQueryConfirmTips 
jQueryConfirmTips.js 5KB imgs 
alert.png 156KB default.png 108KB prompt.png 211KB
running.gif 77KB confirm.png 195KB info.png 207KB jquery-1.10.2.min.js 91KB jQueryConfirmTips.css 2KB资源评论
