自定义弹窗组件
HTML
<!doctype html>
<html >
<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" target="_blank" rel="external nofollow" >
<style>
* {
padding:0;
margin:0;
}
</style>
<title>弹窗组件</title>
</head>
<body>
<a href="javascript:;" target="_blank" rel="external nofollow" 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>
JS
$.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;
}