简单js实现弹出登陆框div层,背景变暗不可操作

最近做网站是想到一些网站的登录按钮,点击之后背景变暗且其他内容不能操作。然后也按这思路试了下,废话不多说,直接上代码和demo。

demo示例查看

html代码:plus顺带关注下我的小站阿奇arqi前端吧

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="阿奇arqi关注web,关注前端!js登陆页面效果,漂亮的点击弹出的登录窗口" />
<meta name="description" content="www.arqi.cc,阿奇arqi关注web,关注前端!,漂亮的点击弹出的登录窗口!" />
<title>网页特效 漂亮的点击弹出的登录窗口 阿奇arqi关注web,关注前端!title>
<style type="text/css">
*
{
margin
:0;
padding
:0;
font-size
:12px;
font-weight
:normal;
font-family
:verdana, tahoma, helvetica, arial, sans-serif, "宋体";
font-style
:normal;
list-style-type
:none;
text-decoration
:none;
}
/*login*/
#loginbg
{
display
: none;
position
: absolute;
top
:0;
left
:0;
z-index
:200;
height
:100%;
width
:100%;
background
: #000000;
filter
:alpha(opacity=30);
-moz-opacity
:0.3;
opacity
:0.3;
}
#login
{
position
:absolute;
top
:50%;
left
:40%;
width
:293px;
z-index
:201;
background
:#FFFFFF;
}
#login h2 input
{
height
:18px;
width
:18px;
float
:right;
border
:none;
cursor
:pointer;
margin
:2px 6px 0 0;
}
#login h2 a
{
display
:block;
float
:left;
width
:83px;
height
:26px;
line-height
:26px;
text-align
:center;
text-decoration
:none;
color
:#666;
}
#login h2 a.cur
{
color
:#f00;
}
#login ul
{
padding
:14px 0 18px 12px;
}
#login ul li
{
padding-left
:60px;
margin-top
:10px;
display
:inline-block;
}
#login ul li
{
display
:block;
}
#login ul li:after
{
content
:"youdian";
clear
:both;
display
:block;
height
:0;
visibility
:hidden;
}
#login ul li tt
{
float
:left;
width
:60px;
margin-left
:-70px;
text-align
:right;
line-height
:22px;
color
:#444;
}
#login ul li div input.cell, #login ul li div input.cell2
{
height
:16px;
padding
:2px;
line-height
:16px;
width
:179px;
border
:1px #dcdcdc solid;
color
:#666;
}
#login ul li div input.cell2
{
width
:50px;
}
#login ul li div label
{
color
:#666;
cursor
:pointer;
}
#login ul li div img
{
margin-bottom
:-7px;
margin-left
:8px;
}
* html #login ul li div img
{
margin-bottom
:-4px;
}
*+html #login ul li div img
{
margin-bottom
:-4px;
}
#login ul li div input#fnlogin
{
width
:59px;
height
:21px;
cursor
:pointer;
border
:none;
margin-right
:15px;
}
#login ul li p
{
padding-top
:4px;
color
:#f00;
}
style>
head>
<body>
<a href="http://www.arqi.cc" style="font-size:24px;">阿奇arqi关注web,关注前端!网页特效 漂亮的点击弹出的登录窗口 a>http://www.arqi.cc
<hr>

<a href="#" onClick="open_login()" style="font-size:24px;">登陆|a>
<div id="loginbg">div>
<div id="login" style="display:none;">
<h2>
<input id="close_login" type="button" title="退出登录" value="x" onClick="close_login()" />
<a name="用户名">用户名登录a>
h2>
<ul>
<form id="LoginForm" name="LoginForm" action="" method="post" enctype="multipart/form-data" >
<li>
<input id="loginType" name="loginType" type="hidden"/>
<tt><label id="logtype" for="email">用户名:label>tt>
<div><input id="username" name="username" type="text"/>div>
li>
<li>
<tt><label for="password">密 码:label>tt>
<div><input id="password" name="password" type="password" />div>
li>
<li>
<tt>tt>
<div><input id="reme" name="reme" type="checkbox" /><label for="reme">下次自动登录label>
div>
li>
<li>
<tt>tt>
<div><input id="fnlogin" type="button" value="登陆"/><a href="#">忘记密码a>div>
li>
form>
ul>
div>
<script language="javascript">
function open_login(){
document.getElementById(
'loginbg').style.display='block';
document.getElementById(
'login').style.display='block';
showloginbg();
}
function close_login(){
document.getElementById(
'loginbg').style.display='none';
document.getElementById(
'login').style.display='none';
}
function showloginbg(){
var sWidth,sHeight;
sWidth
= screen.width;
sWidth
= document.body.offsetWidth;
sHeight
=document.body.offsetHeight;
if (sHeight<screen.height){sHeight=screen.height;}
document.getElementById(
"loginbg").style.width = sWidth + "px";
document.getElementById(
"loginbg").style.height = sHeight + "px";
document.getElementById(
"loginbg").style.display = "block";
document.getElementById(
"loginbg").style.display = "block";
document.getElementById(
"loginbg").style.right = document.getElementById("login").offsetLeft + "px";
}
function logo_in(){alert()
//验证
//
转向...
//
myform.action=""
//
myform.submit()
close_login();
};
script>
body>
html>

 

转载于:https://www.cnblogs.com/zFrankie/archive/2011/12/16/2289857.html

你可能感兴趣的:(简单js实现弹出登陆框div层,背景变暗不可操作)