jQuery弹窗插件

自定义弹窗组件

HTML

<!doctype html>
<html lang="en">
 <head>
	<meta charset="UTF-8">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<link rel="stylesheet" type="text/css" href="css/dialog.css">
	<style>
		* {
			padding:0;
			margin:0;
		}
	</style>
	<title>弹窗组件</title>
 </head>
 <body>
	<a href="javascript:;" class="btn">弹窗</a>
	<script src="js/jquery-1.11.3.min.js"></script>
 	<script src="js/dialog.js"></script>
 	<script type="text/javascript">
		$(".btn").click(function() {
			$.dialog({
				title:"提示",
				content:"确定关闭？",
				callback : function(ok) {
					if (ok)
					{
						alert(true);
					} else {
						alert(false);
					}
				}
			});
		});
	</script>
 </body>
</html>

$.dialog = function(opts) {
	var $dialog = $("<div class='dialog'>"+
		"<div class='title'>"+
			"<h3>"+opts.title+"</h3>"+
			"<a href='javascript:;' class='close'>X</a>"+
		"</div>"+
		"<div class='content'>"+
			"<div class='message'>"+
				"<span class='icon'></span>"+
				"<span class='text'>"+opts.content+"</span>"+
			"</div>"+
			"<div class='btn'>"+
				"<input type='button' class='sure' value='确定'/> "+
				"<input type='button' class='cancle' value='取消'/>"+
			"</div>"+
		"</div>	"+
	"</div>");

	$("body").append($dialog).append("<div class='gray'></div>");
	//弹出框居中
	AutoCenter($dialog);
	//浏览器窗口发生改变自动居中
	$(window).resize(function() {
		AutoCenter($dialog);
	});
	//移动
	DialogMove($dialog,opts);
}
function AutoCenter($dialog) {
	var w = $dialog.width();
	var h = $dialog.height();
	var l = $(window).width() - w;
	var t = $(window).height() - h;
	$dialog.css({
		left:(l /2) +"px",
		top:(t / 2)+"px"
	});
}
function DialogMove($dialog,opts){\
	//静止选中文字
	$(document).bind("selectstart",function(){return false;});
	var w = $dialog.width();
	var h = $dialog.height();
	var le = $(document).width() - w;
	var to = $(document).height() - h;
	//拖拽
	$dialog.find(".title").mousedown(function(evw) {
		var ev = evw || window.event;
		var dialogBox = $(this).parent()
		var _left = ev.clientX - dialogBox.offset().left;
		var _top = ev.clientY - dialogBox.offset().top;
		var flag = true;
		$(document).mousemove(function(eve) {
			if (flag)
			{
				var ev = eve || window.event;
				var l = ev.clientX - _left;
				var t = ev.clientY - _top;
				//防止溢出
				if (t <= 0) t = 0;   //top
				if (l <= 0) l = 0;   //left
				if (l >= le) l = le; //bottom
				if (t >= to) t = to; //right
				dialogBox.css({left:l,top:t});
			}
		}).mouseup(function() {
			flag = false;
		});
	});
	//关闭按钮
	$dialog.find(".close").click(function() {
		$dialog.remove();
		$(".gray").remove();
	});

	//确定按钮
	$dialog.find(".sure").click(function() {
		if (opts.callback)
		{
			$dialog.remove();
			$(".gray").remove();
			opts.callback(true);
		}
	});
	//取消按钮
	$dialog.find(".cancle").click(function() {
		if (opts.callback)
		{
			opts.callback(false);
		}
	});
}

CSS

.gray {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
}
.dialog {
	position:absolute;
	left:200px;
	top:200px;
	width:273px;
	height:167px;
	background:#EEF3FA;
	z-index:9999;
}
.title {
	cursor:move;
	height:20px;
	padding:10px 15px;
	background:#119da9;
	color:#FFF;
	font-size:14px;
}
.title h3 {
	float:left;
}
.title a {
	float:right;
	font-size:18px;
}
.message {
	padding:18px 40px;
}
.message .text {
	color:#aaa;
	font-size:14px;
	margin:12px 0 0 22px;
}
.btn {
	text-align:center;
}
.btn input {
	outline:none;
	width:100px;
	height:30px;
	border:1px solid #119da9;
	background:#FFF;
	transition:.3s;
}
.btn input:hover {
	background:#119da9;
	cursor:pointer;
	color:white;
}

猜你喜欢