html弹出式登录窗口（DIV悬浮窗口）实现

最新推荐文章于 2024-05-21 19:31:47 发布

liuchuan6617

最新推荐文章于 2024-05-21 19:31:47 发布

阅读量3.4w

点赞数 9

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>点击文字弹出一个DIV层窗口代码</title>

<style>

.black_overlay{

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color: black;

z-index:1001;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=88);

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

width: 55%;

height: 55%;

padding: 20px;

border: 10px solid orange;

background-color: white;

z-index:1002;

overflow: auto;

}

</style>

</head>

<body>

<div id="light" class="white_content" style="background:url(./image/jd.jpg);background-size:100%;">
<a href = "javascript:void(0)" style="top:0px;left:0px" onclick = "closeDialog()">X</a>
<div id="login" align="center" >
<h1 align="center" style="font-size:20px;color:ActiveBorder">用户登录</h1>
<div method="post" align="center" style="font-size:20px">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
<a href="yonghuzhuce.aspx" style="font-size:20px;text-align:center;color:white">点击此处注册</a>

</div>

</div>
<div id="fade" class="black_overlay">
</div>

</body>

$(function(){

})

function openDialog(){

document.getElementById('light').style.display='block';

document.getElementById('fade').style.display='block'

}

function closeDialog(){

document.getElementById('light').style.display='none';

document.getElementById('fade').style.display='none'

}

</script></html>

js实现弹窗登录验证
1.CSS隐藏的弹窗块

#login{
   position:absolute;   /*设置布局方式*/
   width:280px;       /*设置宽度*/
   padding:4px;       /*设置内边距*/
   height:156px;       /*设置高度*/
   display:none;        /*设置显示方式*/
   z-index:10;                   /*设置层叠顺序*/
   background-color:red;   /*设置背景颜色*/
}
</style>

2.js显示登录弹窗

//居中显示用户页面
function Myopen(divID){                                //根据传递的参数确定显示的层
var notClickDiv=document.getElementById("notClickDiv");   //获取id为notClickDiv的层
   notClickDiv.style.display='block';                       //设置层显示
   notClickDiv.style.width=document.body.clientWidth;
   notClickDiv.style.height=document.body.clientHeight;
document.getElementById(divID).style.display='block';                           //设置由divID所指定的层显示
document.getElementById(divID).style.left=(document.body.clientWidth-240)/2;       //设置由divID所指定的层的左边距
document.getElementById(divID).style.top=(document.body.clientHeight-139)/2;       //设置由divID所指定的层的顶边框
}

//隐藏用户登录页面
function myClose(divID){
divID.style.display='none'; //设置id为login的层隐藏
//设置id为notClickDiv的层隐藏
document.getElementById("notClickDiv").style.display='none';
}

3.实现登录

<div id="notClickDiv"></div>

<div id="top"></div>

<div id="navigation">
<div style="float:left;color:#006700;">
   <c:if test="${!empty sessionScope.userName}">
       <b>   》  欢迎 ${sessionScope.userName} 登录九宫格日记网！</b>
   </c:if>
   <c:if test="${empty sessionScope.userName}">
       <b>   》  欢迎光临九宫格日记网！</b>
   </c:if>
   </div>

   
   <div style="float:right;text-align: right;">
       <a href="DiaryServlet?action=listAllDiary">首页</a>
   <c:if test="${empty sessionScope.userName}">
         |  <a href="#" onClick="Myopen('login')">登录</a>
         |  <a href="#" onClick="Regopen('register')">注册</a>
         |  <a href="forgetPwd_1.jsp">找回密码</a>
   </c:if>
   <c:if test="${!empty sessionScope.userName}">
        |  <a href="DiaryServlet?action=listMyDiary">我的日记</a>
         |  <a href="writeDiary.jsp">写九宫格日记</a>
         |  <a href="UserServlet?action=exit">退出登录</a>
   </c:if>
   </div>

</div>

4.隐藏的登录窗口

<div id="login">
<form name="form2" method="post" action="" id="form2">
   <div id="loginTitle">清爽夏日九宫格日记网--用户登录</b></div>
   <div id="loginContent" style="background-color:#FFFEF9; margin:0px;">
   <ul id="loginUl"><li>

   
   
   用户名：<input type="text" name="username" style="width:120px" οnkeydοwn="if(event.keyCode==13){this.form.pwd.focus();}">
   </li><li>
   密    码：<input type="password" name="pwd" style="width:120px" οnkeydοwn="if(event.keyCode==13){loginSubmit(this.form)}"> <a href="forgetPwd_1.jsp">找回密码</a>
   </li><li style="padding-left:40px;">
   <input name="Submit" type="button" οnclick="loginSubmit(this.form)" value="登录">
 
<input name="Submit2" type="button" value="关闭" onClick="myClose(login)">
   </li></ul>
   </div>
    <div style="background-color:#FEFEFC;height:10px;"></div>
</form>
</div>
-

liuchuan6617

关注

9
点赞
踩
56

收藏

觉得还不错? 一键收藏
1
评论
html弹出式登录窗口（DIV悬浮窗口）实现

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta charset="utf-8"> <title>点击文字弹出一个DIV层窗口代码</title> ...
复制链接

扫一扫