标签：
网络有好多插件可以实现弹出框的功能，而且都已经很完善了。但还是喜欢自己动手写一下，虽然花了一点时间但是我觉的还是有收获的，在此将代码存档了。
效果图：
代码:
html
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> body { margin: 0px; padding: 0px; width: 100%; height: 100%; position: absolute; } </style> <!--javascript代码块--> </head> <body> <input type="button" value="默认测试" id="test1" /> <input type="button" value="自定义测试" id="test2" /> </body> </html>
javascript代码块
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var huidiao;
$(function () {
//测试代码
huidiao = a;
$("#test1").click(function () {
showDialog(null, null, null);
});
$("#test2").click(function () {
var style = {
width: 500,
height: 400,
bordercolor: "blue",
borderwidth: "2px",
titlename: "自定义测试",
titlebgcolor: "green"
};
var iframe = $("<iframe src=‘http://www.cnblogs.com/‘></iframe>");
iframe.css({
"width": "99%",
"height": "99%"
});
showDialog(style, iframe, huidiao);
});
})
function a() {
alert("回调函数测试");
}
/*
*弹出框
*参数:
*diastyle:{
* width:300,
* height:600,
* bordercolor:‘black‘,
* borderwidth:‘1px‘,
* borderstyle:‘solid‘,
* titlename:‘标题‘,
* titlebgcolor:‘black‘,
* titlefgcolor:‘white‘
*}
*content 弹出框包含内容
*callback 回调函数
*/
function showDialog(diastyle, content, callback) {
if (!diastyle) {
diastyle = {};
}
var style = {
width: diastyle.width || 600,
height: diastyle.height || 400,
bordercolor: diastyle.bordercolor || ‘black‘,
borderwidth: diastyle.borderwidth || ‘1px‘,
borderstyle: diastyle.borderstyle || ‘solid‘,
titlename: diastyle.titlename || ‘标题‘,
titlebgcolor: diastyle.titlebgcolor || ‘black‘,
titlefgcolor: diastyle.titlefgcolor || ‘white‘
};
//弹出窗口
var diadiv = $("<div id=‘diadiv‘></div>");
diadiv.css({
"display": "none",
"position": "absolute",
"background-color": "white",
"top": "50%",
"left": "50%",
"margin-top": "-" + style.height / 2 + "px",
"margin-left": "-" + style.width / 2 + "px",
"width": style.width,
"height": style.height,
"border": style.borderwidth + " " + style.borderstyle + " " + style.bordercolor,
"border-radius": "5px",
"box-shadow": "0px 0px 20px #888888",
"z-index": "10000"
});
//标题栏
var diatitle = $("<div id=‘diatitle‘></div>")
diatitle.css({
"color": style.titlefgcolor,
"font-style": "微软雅黑",
"background-color": style.titlebgcolor,
"position": "absolute",
"top": "0px",
"left": "0px",
"width": "100%",
"height": "25px"
});
//鼠标移动弹出框
press = false;
var offleft = null; //鼠标按下的位置与dialog的x相差
var offtop = null; //鼠标按下的位置与dialog的y相差
diatitle.mousedown(function () {
press = true;
$(this).css("cursor", "move");
diadiv.css("z-index", "10002");
offleft = event.clientX - diadiv.get(0).offsetLeft;
offtop = event.clientY - diadiv.get(0).offsetTop;
})
window.onmouseup = function () {
press = false;
};
window.onmousemove = function () {
if (press) {
diadiv.css("left", (event.clientX - offleft + style.width / 2) + "px");
diadiv.css("top", (event.clientY - offtop + style.height / 2) + "px");
}
}
//标题名称
var diatitlename = $("<span id=‘titlefont‘>" + style.titlename + "</span>")
diatitlename.css({
"position": "absolute",
"display": "inline-block",
"padding": "3px",
"left": "3px",
});
diatitle.append(diatitlename);
//关闭按钮
var diaclose = $("<span id=‘colsespan‘>x</span>");
diaclose.css({
"position": "absolute",
"display": "inline-block",
"padding": "3px",
"right": "3px"
});
//关闭按钮 鼠标经过和关闭弹出框
diaclose.hover(function () {
$(this).css({ "cursor": "pointer", "color": "red" });
}, function () {
$(this).css({ "cursor": "default", "color": "white" });
}).click(function () {
diabg.fadeOut(500);
diadiv.fadeOut(500, function () {
if (callback != null) {
callback();
}
$(this).remove();
diatitle.remove();
diadiv.remove();
diabg.remove();
});
});
diatitle.append(diaclose);
diadiv.append(diatitle);
//添加弹出框包含内容div
var diacontentdiv = $("<div id=‘diacontentdiv‘></div>");
diacontentdiv.css({
"position": "absolute",
"top": diatitle.height() + "px",
"left": "0px",
"height": (diadiv.height() - diatitle.height()) + "px",
"width": "100%",
"border-radius": "0px 0px 5px 5px",
"over-flow": "auto"
});
if (content) {
diacontentdiv.append(content);
}
diadiv.append(diacontentdiv);
//添加背景遮罩
var diabg = $("<div id=‘diabg‘></div>");
debugger;
diabg.css({
"position": "absolute",
"background-color": "#cccccc",
"top": "0px",
"left": "0px",
"z-index": "9999",
"width": window.document.body.scrollWidth,
"height": window.document.body.scrollHeight,
"opacity": "0.6"
});
//遮罩长宽调整
window.onresize = function () {
diabg.css({
"width": window.document.body.scrollWidth,
"height": window.document.body.scrollHeight
});
}
//添加到页面
$(document.body).append(diabg.fadeIn(400)).append(diadiv.fadeIn(500));
}
</script>
标签：
原文地址：http://www.cnblogs.com/DengYW/p/4335270.html
