一个关于弹出登陆框的页面 用遮罩 div
2009-08-01 15:53
211 查看
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!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>
<style type="text/css">
body{
text-align:center;
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
background: #666666;
}
#container{
width:85%;
text-align:left;
background: #FFFFFF;
}
#header {
background: #DDDDDD;
padding: 0 10px; /* 此填充会将出现在它后面的 div 中的元素左对齐。如果 #header 中使用的是图像（而不是文本），您最好删除填充。 */
}
#header h1 {
margin: 0; /* 将 #header div 中最后一个元素的边距设置为零将避免边距重叠（即 div 之间出现的无法解释的空白）。如果 div 周围有边框，则不必将边距设置为零，因为边框也会避免边距重叠 */
padding: 10px 0; /* 使用填充而不使用边距将可以使元素远离 div 的边缘 */
display : inline;
}
#header div {
text-align:right;
}
#header div div{
margin:0;
display : inline;
padding:0 10px;
}
#sidebar1 {
float: left;
width: 200px; /* 由于此元素是浮动的，因此必须指定宽度 */
background: #EBEBEB; /* 将显示背景色，其宽度等于栏中内容的长度，*/
padding: 15px 10px; /* 顶部和底部的填充将在该 div 中产生视觉空间 */
}
#mainContent{
margin: 0 20px 0 220px;/*上右下左*/
}
.clearfloat { /* 此类应当放在 div 或 break 元素上，而且该元素应当是完全包含浮动的容器关闭之前的最后一个元素 */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#footer {
padding: 0 10px; /* 此填充会将它上面 div 中的所有元素左对齐。 */
background:#DDDDDD;
}
</style>
<style TYPE="text/css">
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover {color: #ff00ff;text-decoration:underline}
</style>
<style>
/*弹出的登陆框的样式*/
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
/*判断是否是IE*/
var isIe=(document.all)?true:false;
/*本来想把登陆框放在点击按钮的地方，后来想一般都是放中间的，所以后面没有用到了*/
function mousePosition(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=window.screen.availWidth;
var bHeight=document.body.scrollHeight;
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;z-index:50;";
styleStr+=(isIe)?"filter:alpha(opacity=90);":"opacity:0.40;";
back.style.cssText=styleStr;
document.body.appendChild(back);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
/*div中放了一个登陆框*/
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' border='0'><tr><td>窗口标题</td><td><div align='right'>"+
"<input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></div></td></tr>"+
"<tr><td>用户名</td><td><input type='text' name='textfield' id='textfield' /></td></tr>"+
"<tr><td>密码</td><td><input type='password' name='textfield' id='textfield' /></td></tr>"+
"<tr><td>重复密码</td><td><input type='password' name='textfield' id='textfield' /></td></tr>"+
"<tr><td></td><td><div align='center'><input type='button' value='登陆'/> <input type='button' onclick='closeWindow();' value='取消'/></div></td></tr>"+
"</table></div>";
var width=document.body.offsetWidth
var height=document.body.offsetHeight;
styleStr="left:"+(width/2-(wWidth/2))+"px;top:"+(height/2-100)+"px;position:absolute;width:"+wWidth+"px;z-index:99;"
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//关闭窗口
function closeWindow()
{
if(document.getElementById('back')!=null){
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null){
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
}
//测试弹出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";
showMessageBox('窗口标题',messContent,objPos,250);
}
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1>标题</h1><div><div><a href="#">论坛</a></div><div><a href="#">博客</a></div><div><a href="#" onclick="testMessageBox(event)">登陆</a></div><div><a href="#">注册</a></div></div>
<!-- end #header -->
</div>
<div id="sidebar1">
<h3>sidebar1 内容</h3>
<p>此 div 上所显示的背景色刚好与内容等宽。如果您喜欢改用分界线，而且 #mainContent div 所包含的内容将始终比 #sidebar1 div 中的多，请在 #mainContent div 的左边缘放置一个边框。 </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<h1> 主要内容 </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 级别的标题 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent -->
</div>
<!-- 这个用于清除浮动的元素应当紧跟 #mainContent div 之后，以便强制 #container div 包含所有的子浮动 --><br class="clearfloat" />
<div id="footer">
<p>脚注</p>
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
<!--隐藏的登陆框
<div id="loginLayer"><table width="100%" border="0">
<tr>
<td>窗口标题</td>
<td><div align="right">
<input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' />
</div></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td>重复密码</td>
<td><input type="password" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td></td>
<td><div align="center">
<input type='button' value='登陆'/>
<input type='button' value='取消'/>
</div></td>
</tr>
</table>
</div>-->
</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>
<style type="text/css">
body{
text-align:center;
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
background: #666666;
}
#container{
width:85%;
text-align:left;
background: #FFFFFF;
}
#header {
background: #DDDDDD;
padding: 0 10px; /* 此填充会将出现在它后面的 div 中的元素左对齐。如果 #header 中使用的是图像（而不是文本），您最好删除填充。 */
}
#header h1 {
margin: 0; /* 将 #header div 中最后一个元素的边距设置为零将避免边距重叠（即 div 之间出现的无法解释的空白）。如果 div 周围有边框，则不必将边距设置为零，因为边框也会避免边距重叠 */
padding: 10px 0; /* 使用填充而不使用边距将可以使元素远离 div 的边缘 */
display : inline;
}
#header div {
text-align:right;
}
#header div div{
margin:0;
display : inline;
padding:0 10px;
}
#sidebar1 {
float: left;
width: 200px; /* 由于此元素是浮动的，因此必须指定宽度 */
background: #EBEBEB; /* 将显示背景色，其宽度等于栏中内容的长度，*/
padding: 15px 10px; /* 顶部和底部的填充将在该 div 中产生视觉空间 */
}
#mainContent{
margin: 0 20px 0 220px;/*上右下左*/
}
.clearfloat { /* 此类应当放在 div 或 break 元素上，而且该元素应当是完全包含浮动的容器关闭之前的最后一个元素 */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#footer {
padding: 0 10px; /* 此填充会将它上面 div 中的所有元素左对齐。 */
background:#DDDDDD;
}
</style>
<style TYPE="text/css">
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover {color: #ff00ff;text-decoration:underline}
</style>
<style>
/*弹出的登陆框的样式*/
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
/*判断是否是IE*/
var isIe=(document.all)?true:false;
/*本来想把登陆框放在点击按钮的地方，后来想一般都是放中间的，所以后面没有用到了*/
function mousePosition(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=window.screen.availWidth;
var bHeight=document.body.scrollHeight;
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;z-index:50;";
styleStr+=(isIe)?"filter:alpha(opacity=90);":"opacity:0.40;";
back.style.cssText=styleStr;
document.body.appendChild(back);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
/*div中放了一个登陆框*/
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' border='0'><tr><td>窗口标题</td><td><div align='right'>"+
"<input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></div></td></tr>"+
"<tr><td>用户名</td><td><input type='text' name='textfield' id='textfield' /></td></tr>"+
"<tr><td>密码</td><td><input type='password' name='textfield' id='textfield' /></td></tr>"+
"<tr><td>重复密码</td><td><input type='password' name='textfield' id='textfield' /></td></tr>"+
"<tr><td></td><td><div align='center'><input type='button' value='登陆'/> <input type='button' onclick='closeWindow();' value='取消'/></div></td></tr>"+
"</table></div>";
var width=document.body.offsetWidth
var height=document.body.offsetHeight;
styleStr="left:"+(width/2-(wWidth/2))+"px;top:"+(height/2-100)+"px;position:absolute;width:"+wWidth+"px;z-index:99;"
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//关闭窗口
function closeWindow()
{
if(document.getElementById('back')!=null){
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null){
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
}
//测试弹出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";
showMessageBox('窗口标题',messContent,objPos,250);
}
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1>标题</h1><div><div><a href="#">论坛</a></div><div><a href="#">博客</a></div><div><a href="#" onclick="testMessageBox(event)">登陆</a></div><div><a href="#">注册</a></div></div>
<!-- end #header -->
</div>
<div id="sidebar1">
<h3>sidebar1 内容</h3>
<p>此 div 上所显示的背景色刚好与内容等宽。如果您喜欢改用分界线，而且 #mainContent div 所包含的内容将始终比 #sidebar1 div 中的多，请在 #mainContent div 的左边缘放置一个边框。 </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<h1> 主要内容 </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 级别的标题 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent -->
</div>
<!-- 这个用于清除浮动的元素应当紧跟 #mainContent div 之后，以便强制 #container div 包含所有的子浮动 --><br class="clearfloat" />
<div id="footer">
<p>脚注</p>
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
<!--隐藏的登陆框
<div id="loginLayer"><table width="100%" border="0">
<tr>
<td>窗口标题</td>
<td><div align="right">
<input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' />
</div></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td>重复密码</td>
<td><input type="password" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td></td>
<td><div align="center">
<input type='button' value='登陆'/>
<input type='button' value='取消'/>
</div></td>
</tr>
</table>
</div>-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html 锁定页面(js遮罩层弹出div效果)
- 求高手指教,我有一个会员登陆文件页面,我想在会员点登陆弹出新窗口,然后自动关闭登陆窗口
- html 锁定页面(js遮罩层弹出div效果)
- aspx页面用一个遮罩层显示正在加载，加载完后隐藏该div
- 点击登陆链接在本页面弹出一个登陆窗口效果
- 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div，点击空白消失
- 一个很好的页面弹出div的写法
- Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
- GreyFrame是一个遮罩弹出显示页面的JS类, 它可以允许你像在框架(如: frame和iframe)中打开一个链接.
- 基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
- asp.net中关于点击页面一个控件，弹出框的制作
- aspx页面用一个遮罩层显示正在加载，加载完后隐藏该div
- 弹出DIV层,可选择遮罩当前或全部页面
- 实现弹出一个隐藏的div窗口，body页面变成灰色并且不可被编辑
- 求高手指教,我有一个会员登陆文件页面,我想在会员点登陆弹出新窗口,然后自动关闭登陆窗口,就象腾讯2007版的官方会员网站http://my.qq.com上面的那个登陆窗口一样
- 实现功能：弹出一个DIV层提示等待信息，这个时候禁用用户操作页面中的其他内容
- js 弹出页面和在空白区域显示一个结果。
- jQuery+css+html实现页面遮罩弹出框
- Android:2分钟创建一个好看的关于页面
- 弹出一个html页面