自定义弹窗组件
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>
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; }