方法一、结合jquery与css前台页面定位，滚动页面时不闪烁（强烈推荐）
1、定义CSS
<style type="text/css">
body {
height: 100%;
overflow: auto;
margin: 0;
}
#test_Div {
position: fixed;
_position: absolute;
top: 50%;
left: 50%;
border: 2px solid #C0C0C0;/*弹出框边框样式*/
background-color: #FFFFFF;/*弹出框背景色*/
display:none;
}
* html {
overflow: hidden;
position: absolute;
}
</style>2、定义javascript
要实现效果，首先引入jquery类库及jquery_ui
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/js/jquery-ui-1.9.2.custom.min.js"></script>特别注意：显示弹出层时，如果弹出层为table则display:''，如果是div，则display:block）
//弹出层
function show_Win(div_Win, tr_Title, event) {
var s_Width = document.documentElement.scrollWidth; //滚动 宽度
var s_Height = document.documentElement.scrollHeight; //滚动 高度
var js_Title = $(document.getElementById(tr_Title)); //标题
js_Title.css("cursor", "move");
//创建遮罩层
$("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");
//获取弹出层
var msgObj = $("#" + div_Win);
msgObj.css('display', 'block'); //必须先弹出此行，否则msgObj[0].offsetHeight为0，因为"display":"none"时，offsetHeight无法取到数据；如果弹出框为table，则为'',如果为div，则为block，否则textbox长度无法充满td
//y轴位置
var js_Top = -parseInt(msgObj.height()) / 2 + "px";
//x轴位置
var js_Left = -parseInt(msgObj.width()) / 2 + "px";
msgObj.css({ "margin-left": js_Left, "margin-top": js_Top });
//使弹出层可移动
msgObj.draggable({ handle: js_Title, scroll: false });
}3、调用
<input type="button" value="测试弹出框" onclick="show_Win('div_Test', 'title', event)" />
<div id="div_Test">
<div id="title" style="border: 1px solid red;">标题</div>
内容
</div>方法二、结合jquery与css后台页面定位，滚动页面时闪烁（不推荐）
1、定义javascript
要实现效果，首先引入jquery类库及jquery_ui
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/js/jquery-ui-1.9.2.custom.min.js"></script>特别注意：显示弹出层时，如果弹出层为table则display:''，如果是div，则display:block）
//弹出层
function show_Win(div_Win, tr_Title, event) {
var s_Width = document.documentElement.scrollWidth; //滚动 宽度
var s_Height = document.documentElement.scrollHeight; //滚动 高度
var js_Title = $(document.getElementById(tr_Title)); //标题
js_Title.css("cursor", "move");
//创建遮罩层
$("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");
//获取弹出层
var msgObj = $("#" + div_Win);
msgObj.css('display', 'block'); //必须先弹出此行，否则msgObj[0].offsetHeight为0，因为"display":"none"时，offsetHeight无法取到数据；如果弹出框为table，则为'',如果为div，则为block，否则textbox长度无法充满td
//弹出层居中
centre_Second(div_Win);
//窗体滚动或缩放时，保证弹出框居中
$(window).bind("resize scroll", function () { centre_Second(div_Win); })
//使弹出层可移动
msgObj.draggable({ handle: js_Title, scroll: false });
}
//弹出框居中（方法一）
function centre_First(div_Win) {
//获取弹出层
var msgObj = $(document.getElementById(div_Win));
var c_Width = document.documentElement.clientWidth; //可见 宽度
var s_Left = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft; //据左边距 宽度(document.body的加入是为了兼容safari浏览器)
var c_Height = document.documentElement.clientHeight; //可见 高度
var s_Top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //距上边距 高度(document.body的加入是为了兼容safari浏览器)
//y轴位置
var js_Top = (c_Height - parseInt(msgObj.height())) / 2 + s_Top + "px";
//x轴位置
var js_Left = (c_Width - parseInt(msgObj.width())) / 2 + s_Left + "px";
msgObj.css({ "position": "absolute", "top": js_Top, "left": js_Left, "background-color": "#ffffff", "border": "double 4px #4876FF" });
}
//弹出框居中(方法二)
function centre_Second(div_Win) {
//获取弹出层
var msgObj = $(document.getElementById(div_Win));
var s_Left = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft; //据左边距 宽度(document.body的加入是为了兼容safari浏览器)
var s_Top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //距上边距 高度(document.body的加入是为了兼容safari浏览器)
//y轴位置
var js_Top = -parseInt(msgObj.height()) / 2 + s_Top + "px";
//x轴位置
var js_Left = -parseInt(msgObj.width()) / 2 + s_Left + "px";
msgObj.css({ "position": "absolute", "top": "50%", "left": "50%", "margin-left": js_Left, "margin-top": js_Top, "background-color": "#ffffff", "border": "double 4px #4876FF" });
}3、调用
<input type="button" value="测试弹出框" onclick="show_Win('div_Test', 'title', event)" />
<div id="div_Test">
<div id="title" style="border: 1px solid red;">标题</div>
内容
</div>方法三、纯javascript，不能随滚动条滚动（不推荐）
代码
var c_Width, //可见 宽度
s_Width, //滚动 宽度
s_Left, //据左边距 宽度
c_Height, //可见 高度
s_Height, //滚动 高度
s_Top, //距上边距 高度
js_Top, //弹出框距 上边框 距离
js_Left, //弹出框距 左边框 距离
js_Title; //标题行
function show_Win(div_Win, tr_Title, event) {
c_Width = document.documentElement.clientWidth; //可见 宽度
s_Width = document.documentElement.scrollWidth; //滚动 宽度
s_Left = document.documentElement.scrollLeft || document.body.scrollLeft; //据左边距 宽度(document.body的加入是为了兼容safari浏览器)
c_Height = document.documentElement.clientHeight; //可见 高度
s_Height = document.documentElement.scrollHeight; //滚动 高度
s_Top = document.documentElement.scrollTop || document.body.scrollTop; //距上边距 高度(document.body的加入是为了兼容safari浏览器)
js_Title = $("#" + tr_Title); //标题
js_Title.css("cursor","move");
//创建遮罩层
$("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6", "z-index": "2147483583" }).prependTo("body");
//获取弹出层
var msgObj = $("#" + div_Win);
//从鼠标点击控件的位置 到 屏幕居中位置渐变
var obj = $(event.target || event.srcElement);
js_X = obj.offset().left; //被点击按钮距 上边距 距离
js_Y = obj.offset().top; //被点击按钮距 左边距 距离
msgObj.css("display","block"); //必须先弹出此行，否则msgObj[0].offsetHeight为0，因为"display":"none"时，offsetHeight无法取到数据
//y轴位置
js_Top = (c_Height - parseInt(msgObj[0].offsetHeight)) / 2 + s_Top + "px";
//x轴位置
js_Left = (c_Width - parseInt(msgObj[0].offsetWidth)) / 2 + s_Left + "px";
msgObj.css("display", "none");//为了运行animate效果，再隐藏
msgObj.css({ "position": "absolute", "top": js_Y, "left": js_X, "background-color": "#ffffff", "border": "double 4px #808080", "z-index": "2147483647" }).animate({ top: js_Top, left: js_Left, width: 'toggle', height: 'toggle' });
//处理移动事件
element = document.getElementById(div_Win);
drag_element = document.getElementById(tr_Title);
drag_element['target'] = div_Win;
drag_element.onmousedown = pop_mousedown;
}
var pop_dragging = false; //是否允许拖拽
var pop_target; //目标
var pop_mouseX;
var pop_mouseY;
var pop_mouseposX;
var pop_mouseposY;
var pop_oldfunction;
//mousedown
function pop_mousedown(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
if (ie && window.event.button != 1) return;
if (!ie && e.button != 0) return;
pop_dragging = true;
pop_target = this['target'];
pop_mouseX = ie ? window.event.clientX : e.clientX;
pop_mouseY = ie ? window.event.clientY : e.clientY;
if (ie) pop_oldfunction = document.onselectstart;
else pop_oldfunction = document.onmousedown;
if (ie) document.onselectstart = new Function("return false;");
else document.onmousedown = new Function("return false;");
}
//mousemove
function pop_mousemove(e) {
if (!pop_dragging) return;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(pop_target); //移动的dom
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
element.style.left = (element.offsetLeft + mouseX - pop_mouseX) + "px";
element.style.top = (element.offsetTop + mouseY - pop_mouseY) + "px";
pop_mouseX = ie ? window.event.clientX : e.clientX;
pop_mouseY = ie ? window.event.clientY : e.clientY;
}
//mouseup
function pop_mouseup(e) {
if (!pop_dragging) return;
pop_dragging = false;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(pop_target);
if (ie) document.onselectstart = pop_oldfunction;
else document.onmousedown = pop_oldfunction;
}
//mouseposition
function pop_mousepo(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
pop_mouseposX = ie ? window.event.clientX : e.clientX;
pop_mouseposY = ie ? window.event.clientY : e.clientY;
}
if (navigator.appName == "Microsoft Internet Explorer") {
document.attachEvent('onmousedown', pop_mousepo);
} else document.addEventListener('mousedown', pop_mousepo, false);
if (navigator.appName == "Microsoft Internet Explorer") {
document.attachEvent('onmousemove', pop_mousemove);
} else document.addEventListener('mousemove', pop_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer") {
document.attachEvent('onmouseup', pop_mouseup);
} else document.addEventListener('mouseup', pop_mouseup, false);
function close_Win(div_Win) {
var div_Bg = $("#div_Bg");
div_Bg.remove();
$("#" + div_Win).fadeOut(300);
}调用：
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/js_Test.js" type="text/javascript"></script>
代码
<input type="button" value="点击此处实验" onclick="show_Win_Test('div_Pop','tr_Title',event)" />
<div id="div_Pop" style="display: none; width: 600px; height: 400px;">
<table style="width: 100%;">
<tr id="tr_Title">
<td>
标题
</td>
</tr>
<tr style="border: 1px solid red">
<td>
内容
</td>
</tr>
</table>
<input type="button" value="关闭" onclick="close_Win_Test('div_Pop')" />
</div>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
