<%@ language="VBSCRIPT" codepage="936" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>可拖动的弹出遮罩窗口</title>
<script type="text/javascript" language="javascript">
<!--
var currentMoveObj = null; //当前拖动对象
var relLeft; //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj) {
//alert(obj);
currentMoveObj = obj; //当对象被按下时，记录该对象
currentMoveObj.style.position = "absolute";
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y - currentMoveObj.style.pixelTop;
currentMoveObj.style.filter = "Alpha(opacity=60)"; //按下时对象透明
currentMoveObj.style.opacity = "0.6"; //firfox有效
}
function f_mup(obj) {
currentMoveObj = obj; //当鼠标被释放时，记录该对象
currentMoveObj.style.filter = "Alpha(opacity=100)"; //恢复
currentMoveObj = null; //当鼠标释放时同时释放拖动对象
}
function f_move(obj) {
if (currentMoveObj != null) {
currentMoveObj.style.pixelLeft = event.x - relLeft;
currentMoveObj.style.pixelTop = event.y - relTop;
}
}
window.onload = function ResetSize() {
self.resizeTo(window.screen.width, window.screen.availHeight);
self.moveTo(0, 0)
}
function $getDiv(d) { return document.getElementById(d); }
function Open() {
//隐藏select控件
DispalySelect(0);
//显示遮罩层
$getDiv("divPageMask").style.display = "block";
//处理遮罩层
resizeMask();
window.onResize = resizeMask;
//显示弹出窗口
$getDiv("divOpenWin").style.display = "block";
}
function Close() {
//显示select控件
DispalySelect(1);
//处理遮罩层
divPageMask.style.width = "0px";
divPageMask.style.height = "0px";
divOpenWin.style.display = "none";
window.onResize = null;
//隐藏弹出窗口
$getDiv("divOpenWin").style.display = "none";
}
//页面遮罩
function resizeMask() {
var Maskw, Maskh, Openw, Openh;
Maskw = document.body.offsetWidth;
Maskh = window.screen.height; //document.body.scrollHeight;
//alert(Maskw);
//alert(Maskh);
Openw = 300; //弹出窗口宽度
Openh = 160; //弹出窗口高度
//设置遮罩层
var MaskObj = $getDiv("divPageMask");
MaskObj.style.width = Maskw;
MaskObj.style.height = Maskh;
MaskObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=60"; //IE有效
MaskObj.style.opacity = "0.5"; //firfox有效
MaskObj.style.background = "#000";
MaskObj.style.zIndex = "1000";
//设置弹出窗口
var PopObj = $getDiv("divOpenWin");
PopObj.style.left = (Maskw - Openw) / 2 + "px";
PopObj.style.top = (-200 + Maskh - Openh) / 2 + "px";
//alert(PopObj.style.left);
//alert(PopObj.style.top);
PopObj.style.width = Openw;
PopObj.style.height = Openh;
PopObj.style.background = "#fff";
PopObj.style.zIndex = "1001";
}
//显示和隐藏select控件
function DispalySelect(val) {
var dispalyType;
var arrdispalyType = ["hidden", "visible"];
var arrObjSelect = document.getElementsByTagName("select");
for (i = 0; i < arrObjSelect.length; i++) {
arrObjSelect[i].style.visibility = arrdispalyType[val];
}
}
//-->
</script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body, td
{
font-size: 12px;
}
#divPageMask
{
position: absolute;
left: 0px;
top: 0px;
}
#divOpenWin
{
position: absolute;
left: 0px;
top: 0px;
display: none;
border: 1px solid #333;
}
/*弹出窗口*/.close
{
float: right;
display: block;
}
.close a, .close a:link, .close a:visited, .close a:hover
{
text-decoration: none;
color: #fff;
}
#title
{
padding: 6px;
background: #000;
color: #fff;
cursor: move;
}
.content
{
padding: 8px;
}
</style>
</head>
<body>
<form id="form1" name="form1" action="" method="post">
<div id="divPageMask">
</div>
<div id="divOpenWin" onselectstart="return false">
<div id="title" onmousedown="f_mdown(this.parentNode)" onmouseup="f_mup(this.parentNode)"
onmousemove="f_move(this.parentNode)">
<span class="close"><a href="javascript:Close();">关闭</a> </span>按住这里不放可以拖动窗口</div>
<div class="content">
我在马路边，捡到一分钱,把它交到警察叔叔的手里边……</div>
</div>
<p align="center">
<a href="javascript:Open();">点我</a></p>
<div>
<input id="Button1" type="button" value="button" onclick="javascript:alert(document.getElementById('Text1').value)" /><input
id="Text1" type="text" value="我在马路边，捡到一分钱" />
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>可拖动的弹出遮罩窗口</title>
<script type="text/javascript" language="javascript">
<!--
var currentMoveObj = null; //当前拖动对象
var relLeft; //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj) {
//alert(obj);
currentMoveObj = obj; //当对象被按下时，记录该对象
currentMoveObj.style.position = "absolute";
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y - currentMoveObj.style.pixelTop;
currentMoveObj.style.filter = "Alpha(opacity=60)"; //按下时对象透明
currentMoveObj.style.opacity = "0.6"; //firfox有效
}
function f_mup(obj) {
currentMoveObj = obj; //当鼠标被释放时，记录该对象
currentMoveObj.style.filter = "Alpha(opacity=100)"; //恢复
currentMoveObj = null; //当鼠标释放时同时释放拖动对象
}
function f_move(obj) {
if (currentMoveObj != null) {
currentMoveObj.style.pixelLeft = event.x - relLeft;
currentMoveObj.style.pixelTop = event.y - relTop;
}
}
window.onload = function ResetSize() {
self.resizeTo(window.screen.width, window.screen.availHeight);
self.moveTo(0, 0)
}
function $getDiv(d) { return document.getElementById(d); }
function Open() {
//隐藏select控件
DispalySelect(0);
//显示遮罩层
$getDiv("divPageMask").style.display = "block";
//处理遮罩层
resizeMask();
window.onResize = resizeMask;
//显示弹出窗口
$getDiv("divOpenWin").style.display = "block";
}
function Close() {
//显示select控件
DispalySelect(1);
//处理遮罩层
divPageMask.style.width = "0px";
divPageMask.style.height = "0px";
divOpenWin.style.display = "none";
window.onResize = null;
//隐藏弹出窗口
$getDiv("divOpenWin").style.display = "none";
}
//页面遮罩
function resizeMask() {
var Maskw, Maskh, Openw, Openh;
Maskw = document.body.offsetWidth;
Maskh = window.screen.height; //document.body.scrollHeight;
//alert(Maskw);
//alert(Maskh);
Openw = 300; //弹出窗口宽度
Openh = 160; //弹出窗口高度
//设置遮罩层
var MaskObj = $getDiv("divPageMask");
MaskObj.style.width = Maskw;
MaskObj.style.height = Maskh;
MaskObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=60"; //IE有效
MaskObj.style.opacity = "0.5"; //firfox有效
MaskObj.style.background = "#000";
MaskObj.style.zIndex = "1000";
//设置弹出窗口
var PopObj = $getDiv("divOpenWin");
PopObj.style.left = (Maskw - Openw) / 2 + "px";
PopObj.style.top = (-200 + Maskh - Openh) / 2 + "px";
//alert(PopObj.style.left);
//alert(PopObj.style.top);
PopObj.style.width = Openw;
PopObj.style.height = Openh;
PopObj.style.background = "#fff";
PopObj.style.zIndex = "1001";
}
//显示和隐藏select控件
function DispalySelect(val) {
var dispalyType;
var arrdispalyType = ["hidden", "visible"];
var arrObjSelect = document.getElementsByTagName("select");
for (i = 0; i < arrObjSelect.length; i++) {
arrObjSelect[i].style.visibility = arrdispalyType[val];
}
}
//-->
</script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body, td
{
font-size: 12px;
}
#divPageMask
{
position: absolute;
left: 0px;
top: 0px;
}
#divOpenWin
{
position: absolute;
left: 0px;
top: 0px;
display: none;
border: 1px solid #333;
}
/*弹出窗口*/.close
{
float: right;
display: block;
}
.close a, .close a:link, .close a:visited, .close a:hover
{
text-decoration: none;
color: #fff;
}
#title
{
padding: 6px;
background: #000;
color: #fff;
cursor: move;
}
.content
{
padding: 8px;
}
</style>
</head>
<body>
<form id="form1" name="form1" action="" method="post">
<div id="divPageMask">
</div>
<div id="divOpenWin" onselectstart="return false">
<div id="title" onmousedown="f_mdown(this.parentNode)" onmouseup="f_mup(this.parentNode)"
onmousemove="f_move(this.parentNode)">
<span class="close"><a href="javascript:Close();">关闭</a> </span>按住这里不放可以拖动窗口</div>
<div class="content">
我在马路边，捡到一分钱,把它交到警察叔叔的手里边……</div>
</div>
<p align="center">
<a href="javascript:Open();">点我</a></p>
<div>
<input id="Button1" type="button" value="button" onclick="javascript:alert(document.getElementById('Text1').value)" /><input
id="Text1" type="text" value="我在马路边，捡到一分钱" />
</div>
</form>
</body>
</html>
