Jquery 弹出对话框插件xcConfirm.js

其他 2018-05-17 12:00:09 阅读次数: 2

 Jquery 弹出对话框插件xcConfirm.js,感觉很方便使用,使用方法如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Demo</title>
		<link rel="stylesheet" type="text/css" href="css/xcConfirm.css"/>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.sgBtn{width: 135px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; text-align: center; background-color: #0095D9; color: #FFFFFF; float: left; border-radius: 5px;}
		</style>
		<script type="text/javascript">
			$(function(){
				
				
				$("#btn1").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info);
				});
				
				$("#btn2").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.confirm);

				});
				
				$("#btn3").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);
				});
				
				$("#btn4").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
				});
				
				$("#btn5").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
				});
				
				$("#btn6").click(function(){
					var txt=  "请输入";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.input,{
						onOk:function(v){
							console.log(v);
						}
					});
				});
				
				$("#btn7").click(function(){
					var txt=  "自定义呀";
					var option = {
						title: "自定义",
						btn: parseInt("0011",2),
						onOk: function(){
							console.log("确认啦");
						}
					}
					window.wxc.xcConfirm(txt, "custom", option);
				});
				
				$("#btn8").click(function(){
					var txt=  "默认";
					window.wxc.xcConfirm(txt);
				});
			});
		</script>
	</head>
	<body>
		<div class="" style="height: 768px;">
			<div class="sgBtn" id="btn1">弹窗1(信息)</div>
			<div class="sgBtn" id="btn2">弹窗2(提示)</div>
			<div class="sgBtn" id="btn3">弹窗3(警告)</div>
			<div class="sgBtn" id="btn4">弹窗4(错误)</div>
			<div class="sgBtn" id="btn5">弹窗5(成功)</div>
			<div class="sgBtn" id="btn6">弹窗6(输入框)</div>
			<div class="sgBtn" id="btn7">弹窗7(自定义)</div>
			<div class="sgBtn" id="btn8">弹窗8(默认)</div>
		</div>
	</body>
</html>

引入的文件js和css文件如下:

js文件如下:

/*
 * 使用说明:
 * window.wxc.Pop(popHtml, [type], [options])
 * popHtml:html字符串
 * type:window.wxc.xcConfirm.typeEnum集合中的元素
 * options:扩展对象
 * 用法:
 * 1. window.wxc.xcConfirm("我是弹窗<span>lalala</span>");
 * 2. window.wxc.xcConfirm("成功","success");
 * 3. window.wxc.xcConfirm("请输入","input",{onOk:function(){}})
 * 4. window.wxc.xcConfirm("自定义",{title:"自定义"})
 * 只有确定按钮
 * $("#btn1").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info);
				});
				
				有确认和取消按钮,图标是一个问号
				$("#btn2").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.confirm);

				});
				有确认和取消按钮,图标是一个叹号
				$("#btn3").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);
				});
				
				有确认,图标是一个错误
				$("#btn4").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
				});
				
				$("#btn5").click(function(){
					var txt=  "提示文字，提示文字，提示文字，提示文字，提示文字，提示文字";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
				});
				
				$("#btn6").click(function(){
					var txt=  "请输入";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.input,{
						onOk:function(v){
							console.log(v);
						}
					});
				});
 */
(function($){
	window.wxc = window.wxc || {};
	window.wxc.xcConfirm = function(popHtml, type, options) {
	    var btnType = window.wxc.xcConfirm.btnEnum;
		var eventType = window.wxc.xcConfirm.eventEnum;
		var popType = {
			info: {
				title: "信息",
				icon: "0 0",//蓝色i
				btn: btnType.ok
			},
			success: {
				title: "成功",
				icon: "0 -48px",//绿色对勾
				btn: btnType.ok
			},
			error: {
				title: "错误",
				icon: "-48px -48px",//红色叉
				btn: btnType.ok
			},
			confirm: {
				title: "提示",
				icon: "-48px 0",//黄色问号
				btn: btnType.okcancel
			},
			warning: {
				title: "警告",
				icon: "0 -96px",//黄色叹号
				btn: btnType.okcancel
			},
			input: {
				title: "输入",
				icon: "",
				btn: btnType.ok
			},
			custom: {
				title: "",
				icon: "",
				btn: btnType.ok
			}
		};
		var itype = type ? type instanceof Object ? type : popType[type] || {} : {};//格式化输入的参数:弹窗类型
		var config = $.extend(true, {
			//属性
			title: "", //自定义的标题
			icon: "", //图标
			btn: btnType.ok, //按钮,默认单按钮
			//事件
			onOk: $.noop,//点击确定的按钮回调
			onCancel: $.noop,//点击取消的按钮回调
			onClose: $.noop//弹窗关闭的回调,返回触发事件
		}, itype, options);
		
		var $txt = $("<p>").html(popHtml);//弹窗文本dom
		var $tt = $("<span>").addClass("tt").text(config.title);//标题
		var icon = config.icon;
		var $icon = icon ? $("<div>").addClass("bigIcon").css("backgroundPosition",icon) : "";
		var btn = config.btn;//按钮组生成参数
		
		var popId = creatPopId();//弹窗索引
		
		var $box = $("<div>").addClass("xcConfirm");//弹窗插件容器
		var $layer = $("<div>").addClass("xc_layer");//遮罩层
		var $popBox = $("<div>").addClass("popBox");//弹窗盒子
		var $ttBox = $("<div>").addClass("ttBox");//弹窗顶部区域
		var $txtBox = $("<div>").addClass("txtBox");//弹窗内容主体区
		var $btnArea = $("<div>").addClass("btnArea");//按钮区域
		
		var $ok = $("<a>").addClass("sgBtn").addClass("ok").text("确定");//确定按钮
		var $cancel = $("<a>").addClass("sgBtn").addClass("cancel").text("取消");//取消按钮
		var $input = $("<input>").addClass("inputBox");//输入框
		var $clsBtn = $("<a>").addClass("clsBtn");//关闭按钮
		
		//建立按钮映射关系
		var btns = {
			ok: $ok,
			cancel: $cancel
		};
		
		init();
		
		function init(){
			//处理特殊类型input
			if(popType["input"] === itype){
				$txt.append($input);
			}
			
			creatDom();
			bind();
		}
		
		function creatDom(){
			$popBox.append(
				$ttBox.append(
					$clsBtn
				).append(
					$tt
				)
			).append(
				$txtBox.append($icon).append($txt)
			).append(
				$btnArea.append(creatBtnGroup(btn))
			);
			$box.attr("id", popId).append($layer).append($popBox);
			$("body").append($box);
		}
		
		function bind(){
			//点击确认按钮
			$ok.click(doOk);
			
			//回车键触发确认按钮事件
			$(window).bind("keydown", function(e){
				if(e.keyCode == 13) {
					if($("#" + popId).length == 1){
						doOk();
					}
				}
			});
			
			//点击取消按钮
			$cancel.click(doCancel);
			
			//点击关闭按钮
			$clsBtn.click(doClose);
		}

		//确认按钮事件
		function doOk(){
			var $o = $(this);
			var v = $.trim($input.val());
			if ($input.is(":visible"))
		        config.onOk(v);
		    else
		        config.onOk();
			$("#" + popId).remove(); 
			config.onClose(eventType.ok);
		}
		
		//取消按钮事件
		function doCancel(){
			var $o = $(this);
			config.onCancel();
			$("#" + popId).remove(); 
			config.onClose(eventType.cancel);
		}
		
		//关闭按钮事件
		function doClose(){
			$("#" + popId).remove();
			config.onClose(eventType.close);
			$(window).unbind("keydown");
		}
		
		//生成按钮组
		function creatBtnGroup(tp){
			var $bgp = $("<div>").addClass("btnGroup");
			$.each(btns, function(i, n){
				if( btnType[i] == (tp & btnType[i]) ){
					$bgp.append(n);
				}
			});
			return $bgp;
		}

		//重生popId,防止id重复
		function creatPopId(){
			var i = "pop_" + (new Date()).getTime()+parseInt(Math.random()*100000);//弹窗索引
			if($("#" + i).length > 0){
				return creatPopId();
			}else{
				return i;
			}
		}
	};
	
	//按钮类型
	window.wxc.xcConfirm.btnEnum = {
		ok: parseInt("0001",2), //确定按钮
		cancel: parseInt("0010",2), //取消按钮
		okcancel: parseInt("0011",2) //确定&&取消
	};
	
	//触发事件类型
	window.wxc.xcConfirm.eventEnum = {
		ok: 1,
		cancel: 2,
		close: 3
	};
	
	//弹窗类型
	window.wxc.xcConfirm.typeEnum = {
		info: "info",
		success: "success",
		error:"error",
		confirm: "confirm",
		warning: "warning",
		input: "input",
		custom: "custom"
	};

})(jQuery);

css文件如下:

/*垂直居中*/
.verticalAlign {
	vertical-align: middle;
	display: inline-block;
	height: 100%;
	margin-left: -1px;
}

.xcConfirm .xc_layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	opacity: 0.5;
	z-index: 2147000000;
}

.xcConfirm .popBox {
	position: fixed;
	left: 50%;
	top: 50%;
	background-color: #ffffff;
	z-index: 2147000001;
	width: 570px;
	height: 300px;
	margin-left: -285px;
	margin-top: -150px;
	border-radius: 5px;
	/* font-weight: bold; */
	font-weight: 500;
	color: #535e66;
}

.xcConfirm .popBox .ttBox {
	height: 30px;
	line-height: 30px;
	padding: 14px 30px;
	border-bottom: solid 1px #eef0f1;
}

.xcConfirm .popBox .ttBox .tt {
	color: #333;
	font-size: 18px;
	display: block;
	float: left;
	height: 30px;
	position: relative;
}

.xcConfirm .popBox .ttBox .clsBtn {
	display: block;
	cursor: pointer;
	width: 12px;
	height: 12px;
	position: absolute;
	top: 22px;
	right: 30px;
	background: url(../img/icons.png) -48px -96px no-repeat;
}

.xcConfirm .popBox .txtBox {
	margin: 20px 60px;
	height: 120px;
	overflow: hidden;
}

.xcConfirm .popBox .txtBox .bigIcon {
	float: left;
	margin-right: 20px;
	width: 48px;
	height: 48px;
	background-image: url(../img/icons.png);
	background-repeat: no-repeat;
	background-position: 48px 0;
}

.xcConfirm .popBox .txtBox p {
	height: 100px;
	font-size:13px;
	margin-top: 16px;
	line-height: 26px;
	overflow-x: hidden;
	overflow-y: auto;
}

.xcConfirm .popBox .txtBox p input {
	width: 364px;
	height: 30px;
	border: solid 1px #eef0f1;
	font-size: 18px;
	margin-top: 6px;
}

.xcConfirm .popBox .btnArea {
	border-top: solid 1px #eef0f1;
}

.xcConfirm .popBox .btnGroup {
	float: right;
}

.xcConfirm .popBox .btnGroup .sgBtn {
	margin-top: 14px;
	margin-right: 40px;
}

.xcConfirm .popBox .sgBtn {
	display: block;
	cursor: pointer;
	float: left;
	width: 95px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	color: #FFFFFF;
	border-radius: 5px;
}

.xcConfirm .popBox .sgBtn.ok {
	background-color: #0095d9;
	color: #FFFFFF;
}

.xcConfirm .popBox .sgBtn.cancel {
	/* background-color: #333;
	color: #FFFFFF; */
	background-color: #d2d0d0;
    color: #333;
}

参考的链接:http://www.jq22.com/jquery-info2351,我对css样式做了一点点改动,显示的效果如下:


猜你喜欢

转载自blog.csdn.net/omayyouhappy/article/details/80136707
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022