javascript实现模式窗口
这两天在腾讯的修改那一块 觉得挺好看 刚好朋友让我给他做开始的时候不知道这是什么东西 师父说那是模式窗口
网上找了一些资料 然后自己开始做
已完成：
JavaScript代码如下：
function $(_sId)
{return document.getElementById(_sId);}
function moveDiv(event, _sId)
{
var oObj = $(_sId);
oObj.onmousemove = mousemove;
oObj.onmouseup = mouseup;
oObj.setCapture ? oObj.setCapture() : function(){};
oEvent = window.event ? window.event : event;
var dragData = {x : oEvent.clientX, y : oEvent.clientY};
var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
function mousemove()
{
var oEvent = window.event ? window.event : event;
var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
oObj.style.left = iLeft;
oObj.style.top = iTop;
dragData = {x: oEvent.clientX, y: oEvent.clientY};
}
function mouseup()
{
var oEvent = window.event ? window.event : event;
oObj.onmousemove = null;
oObj.onmouseup = null;
if(oEvent.clientX < 1 || oEvent.clientY < 1)
{
oObj.style.left = backData.y;
oObj.style.top = backData.x;
}
oObj.releaseCapture ? oObj.releaseCapture() : function(){};
}
}
function closeDiv(_sID)
{
/* var oObj = $(_sID);
var overlay = $("overlay");
if(overlay != null)
{
overlay.outerHTML = "";
}
oObj.style.display = "none";*/
var oObj = document.getElementById(_sID);
var overlay = document.getElementById("overlay");
if(overlay!=null){
overlay.outerHTML = "";
}
oObj.style.display = "none";
}
function showDiv(_sID,event)
{
var arrySize = getPageSize();
var oObj = $(_sID);
//创建一个DIV,改名为 overlay 这个是透明的层
var oDiv =document.createElement("div");
oDiv.id = "overlay";
document.body.appendChild(oDiv);
var overlay = $("overlay");
overlay.style.height = arrySize;
overlay.style.width = arrySize;
//alert(arrySize);
if(event == null)
{
if(oObj.style.left == "")
{
oObj.style.left = arrySize / 2 - 150 ;
}
if(oObj.style.top == "")
{
oObj.style.top =arrySize / 2;
}
}
else
{
var iEvent= window.event ? window.event : event;
oObj.style.left = arrySize / 2 - 150 ; // iEvent.clientX;
oObj.style.top = arrySize / 2 - 150 ;// iEvent.clientY;
}
oObj.style.display = "block";
overlay.style.display = "block";
overlay.style.zindex = oObj.style.zindex - 1;
}
//取得页面大小
function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Macwould also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
CSS样式如下：
@CHARSET "UTF-8";
img{
border:0px;
}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 500px;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity: 0.6;
opacity: 0.6;
}
.floatDiv{
padding:0 0 0 0;
position:absolute;
width:300px;
margin:0 0 0 0;
z-index:100;
border:1px solid #DADADA;
background:#FFF; padding:1px;
}
.floatDiv .divTitle{
background:#E0E0E0 url('../images/dragForm/title_bg.gif');
background-position:top left;
background-repeat:repeat-x;
height:25px;
line-height:25px;
padding:0px 4px;
cursor:default;
}
.floatDiv .divContent{
padding:3px;
min-height:100px;
height:auto; cursor:default;
}
.floatDiv .divFoot{
background:#F0F0F0;
text-align:right;
padding:4px;
background:#E0E0E0 url('../images/dragForm/bottom_bg.gif');
background-position:top left;
background-repeat:repeat-x;
}
.floatDiv input.divButton{
background:#E0E0E0 url('../images/dragForm/button_bg.gif');
background-position:top left;
background-repeat:repeat-x;
border:1px solid #D1D3D2;
height:21px;
font-size:12px;
padding:2px 5px;
color:#626264;
}
jsp代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<link href="./Css.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="./javascript.js"></script>
</head>
<body>
<div id="main">
<a href="javascript:showDiv('floatDiv');">show</a>
<input type="button"value="显示在这里" />
</div>
<div id="floatDiv" class="floatDiv" style="display:none;">
<div class="divTitle" onmousedown="moveDiv(event,'floatDiv');">
<div style="float:left; width:250px;">提示窗口</div>
<div style="float:right;text-align:right; height:25px;" >
<a href="javascript:;" ><img src="images/dragform/ico_close.gif" onmouseout="this.src='images/dragform/ico_close.gif';" onmousemove="this.src='images/dragform/ico_close1.gif';" align="absmiddle" alt="关闭" /></a>
</div>
</div>
<div class="divContent" >
<p>根据系统设置，修改密码前必须通过安全验证
</p>
<form action="">
<table>
<tr>
<td>你父亲的名字是什么？</td>
<td><input type="text" name="answer"/></td>
</tr>
</table>
<div class="divFoot">
<input type="submit" class="divButton" value="确 定" /><input type="button" class="divButton"value="取 消" />
</div>
</form>
</div>
</div>
</body>
</html>
《测试已通过，在火狐里面效果不是很好，在IE8中，可以很好的看到效果》
页:
[1]