弹出层3
<%@ 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 XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-表单特效-漂亮的点击弹出的登陆框</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.login {
z-index: +1;
}
body {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.login .inputb {
width: 97px;
height: 15px;
border: 1px solid #baced6;
font-size: 12px;
padding-top: 2px;
margin-right: 6px;
display: block;
float: left;
}
.login_header {
cursor: move
}
.login div.login_header {
border: black;
border-bottom: 0px;
cursor: default;
width: 254px;
height: 31px;
line-height: 19px;
vertical-align: middle;
background:
url('http://www.zzsky.cn/effect/images/200810041725_login/headbg.gif')
no-repeat;
text-decoration: none;
}
.login div.login_body {
border: black;
width: 254px;
background:
url('http://www.zzsky.cn/effect/images/200810041725_login/bg.gif')
no-repeat left bottom;
margin: 0;
}
.login img.login_exit {
float: right;
margin: 6px 8px 0px 0px;
cursor: pointer;
}
.login table {
border-collapse: collapse;
margin-bottom: 5px;
}
.login table th,.login table td {
padding: 3px 0;
}
.login table th {
width: 68px;
text-align: right;
font-weight: normal;
color: #4e6aab;
}
.login .code {
}
.login .code img {
border: 1px solid #adc6dd;
margin-bottom: -5px;
}
.login .lsubmit {
padding-left: 60px;
}
.login table td .linka {
display: block;
float: left;
padding-top: 4px;
}
</style>
<script language="javascript">
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
function popup_display(x) {
var win = window.open();
for ( var i in x)
win.document.write(i + ' = ' + x[i] + '<br>');
}
// ----- popup_mousedown -------------------------------------------------------
function popup_mousedown(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
if (ie && window.event.button != 1)
return;
if (!ie && e.button != 0)
return;
popup_dragging = true;
popup_target = this['target'];
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
if (ie)
popup_oldfunction = document.onselectstart;
else
popup_oldfunction = document.onmousedown;
if (ie)
document.onselectstart = new Function("return false;");
else
document.onmousedown = new Function("return false;");
}
// ----- popup_mousemove -------------------------------------------------------
function popup_mousemove(e) {
if (!popup_dragging)
return;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
element.style.left = (element.offsetLeft + mouseX - popup_mouseX)
+ 'px';
element.style.top = (element.offsetTop + mouseY - popup_mouseY) + 'px';
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
}
// ----- popup_mouseup ---------------------------------------------------------
function popup_mouseup(e) {
if (!popup_dragging)
return;
popup_dragging = false;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
if (ie)
document.onselectstart = popup_oldfunction;
else
document.onmousedown = popup_oldfunction;
}
// ----- popup_exit ------------------------------------------------------------
function popup_exit(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
popup_mouseup(e);
element.style.visibility = 'hidden';
element.style.display = 'none';
}
// ----- popup_show ------------------------------------------------------------
function popup_show() {
element = document.getElementById('popup');
drag_element = document.getElementById('popup_drag');
exit_element = document.getElementById('popup_exit');
element.style.position = "absolute";
element.style.visibility = "visible";
element.style.display = "block";
element.style.left = (document.documentElement.scrollLeft
+ popup_mouseposX - 10)
+ 'px';
element.style.top = (document.documentElement.scrollTop
+ popup_mouseposY - 10)
+ 'px';
drag_element['target'] = 'popup';
drag_element.onmousedown = popup_mousedown;
exit_element.onclick = popup_exit;
}
// ----- popup_mousepos --------------------------------------------------------
function popup_mousepos(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
popup_mouseposX = ie ? window.event.clientX : e.clientX;
popup_mouseposY = ie ? window.event.clientY : e.clientY;
}
// ----- Attach Events ---------------------------------------------------------
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousedown', popup_mousepos);
else
document.addEventListener('mousedown', popup_mousepos, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousemove', popup_mousemove);
else
document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmouseup', popup_mouseup);
else
document.addEventListener('mouseup', popup_mouseup, false);
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<a href="#" onclick="popup_show()">登陆</a>
<div class="login" id="popup"
style="visibility: hidden; display: none;">
<div class="login_header" id="popup_drag">
<img class="login_exit" id="popup_exit"
src="http://www.zzsky.cn/effect/images/200810041725_login/close.gif"
alt="关闭" />
</div>
<div class="login_body">
<form id="member_login" name="member_login" action="" method="post">
<table>
<tr>
<th>用户名：</th>
<td><input type="text" class="inputb" /> <span class="linka"><a
href="#">快速注册</a></span></td>
</tr>
<tr>
<th>密 码：</th>
<td><input type="text" class="inputb" /> <span class="linka"><a
href="#">忘记密码</a></span></td>
</tr>
<tr>
<th>验证码：</th>
<td><input type="text" class="inputb" /> <span class="code"><img
src="http://www.zzsky.cn/effect/images/200810041725_login/code.gif" /></span></td>
</tr>
<tr>
<th>Cookie：</th>
<td><select name="select" id="select">
<option value="1">保持一年</option>
</select></td>
</tr>
<tr>
<td colspan="2" class="lsubmit"><input type="submit"
value="登 录" /> <input type="submit" value="重 置" /></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS5可拖动DIV提示窗口</title>
<script language="javascript">
function alertWin(title, msg, w, h) {
var content = "<br/><br/><input type='file' name='file' id='file' value='浏览'/>";
content += "<br/><p align='left'> <font color='red'>*</font>注意文件格式应为.xls</p>";
content += "<input type='submit' value='提交'/>";
msg = content;
var titleheight = "22px"; // 提示窗口标题高度
var bordercolor = "#666699"; // 提示窗口的边框颜色
var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色
var titlebgcolor = "#666699"; // 提示窗口的标题背景色
var bgcolor = "#FFFFFF"; // 提示内容的背景色
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var bgObj = document.createElement("div");
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"
+ iWidth
+ "px;height:"
+ Math.max(document.body.clientHeight, iHeight)
+ "px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgObj);
var msgObj = document.createElement("div");
msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"
+ (iHeight - h) / 2 + "px;left:" + (iWidth - w) / 2
+ "px;width:" + w + "px;height:" + h
+ "px;text-align:center;border:1px solid " + bordercolor
+ ";background-color:" + bgcolor
+ ";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(msgObj);
var table = document.createElement("table"); //www.divcss5.com divcss5
msgObj.appendChild(table);
table.style.cssText = "margin:0px;border:0px;padding:0px;";
table.cellSpacing = 0;
var tr = table.insertRow(-1);
var titleBar = tr.insertCell(-1);
titleBar.style.cssText = "width:100%;height:"
+ titleheight
+ "px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"
+ titlecolor + ";border:1px solid " + bordercolor
+ ";cursor:move;background-color:" + titlebgcolor;
titleBar.style.paddingLeft = "10px";
titletitleBar.innerHTML = title;
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove; //www.divcss5.com divcss5
var docMouseUpEvent = document.onmouseup;
titleBar.onmousedown = function() {
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);
document.onmousemove = function() {
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX; //www.divcss5.com divcss5
var y = moveTop + evt.clientY - moveY;
if (x > 0 && (x + w < iWidth) && y > 0 && (y + h < iHeight)) {
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
};
document.onmouseup = function() {
if (moveable) {
document.onmousemove = docMouseMoveEvent; //www.divcss5.com divcss5
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
var closeBtn = tr.insertCell(-1);
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:"
+ titlebgcolor;
closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
//关闭窗口
closeBtn.onclick = function() {
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:10pt '宋体';";
msgBox.colSpan = 2;
msgmsgBox.innerHTML = msg;
// 获得事件Event对象，用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}
</script>
</head>
<body>
<input type="button" value="DIVCSS5"
onclick="alertWin('批量添加校友信息','内容',300,200);" />
</body>
</html>