div模拟弹出框
Refer from http://www.cnblogs.com/duhongyu216/articles/1441785.html; http://www.jb51.net/article/20656.htm
方法一、结合jquery与css前台页面定位，滚动页面时不闪烁（强烈推荐）
1、定义CSS
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"); //创建遮罩层 $("").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"); //创建遮罩层 $("").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_Bg\
"
>
"
).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
"
);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 " );
// 创建遮罩层
$( "
// 获取弹出层
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 >
< 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 >
< 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 >