Js实现点击超链接弹出层,效果仿Discuz登录!

简介: 主要应用到的是dispaly:none 和 dispaly:block;来控制实现的;  登录这里还有一种写法  登录  两种效果是一样的;   View Code DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

主要应用到的是dispaly:none 和 dispaly:block;来控制实现的;

 <a id="link" href="#" onclick="linkonclick()">登录</a>这里还有一种写法

 <a href="javascript:linkonclick()">登录</a> 

两种效果是一样的;

 
img_405b18b4b6584ae338e0f6ecaf736533.gif View Code
<! 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 >
    
< title > 点击超链接弹出层 </ title >
    
< style  type ="text/css" >
        *
        
{
            margin
:  0px ;
            padding
:  0px ;
        
}
        body
        
{
            background-image
:  url("../Images/Lv.gif") ;
            font-size
:  12px ;
        
}
        body a
        
{
            font-size
:  100px ;
            color
:  #FFF ;
            text-decoration
:  none ;
        
}
        .login
        
{
            background
:  #FFF ;
            width
:  560px ;
            height
:  360px ;
            position
:  absolute ;
            top
:  310px ;
            left
:  510px ;
            padding
:  10px ;
            z-index
:  20 ;
            display
:  none ;
        
}
        .login ul
        
{
            list-style
:  none ;
            margin-left
:  100px ;
            margin-top
:  50px ;
        
}
        
        .clear
        
{
            background
:  #FFF ;
            display
:  none ;
            width
:  600px ;
            height
:  400px ;
            position
:  absolute ;
            top
:  300px ;
            left
:  500px ;
            z-index
:  10 ;
            filter
:  alpha(opacity=40) ;
            opacity
:  0.4 ;
        
}
    
</ style >
    
< script  type ="text/javascript"  language ="javascript" >
        
function  linkonclick() {
            
var  divs  =  document.getElementsByTagName( " div " );
            
for  ( var  i  =   0 ; i  <  divs.length; i ++ ) {
                
var  newdiv  =  divs[i];
                newdiv.style.display 
=   " block " ;
            }
        }

        
function  btnclick() {
            
var  divs  =  document.getElementsByTagName( " div " );
            
for  ( var  i  =   0 ; i  <  divs.length; i ++ ) {
                
var  newdiv  =  divs[i];
                newdiv.style.display 
=   " none " ;
            }
        }
    
</ script >
</ head >
< body >
    
< id ="link"  href ="#"  onclick ="linkonclick()" > 登录 </ a >
    
< div  class ="login" >
        
< ul >
            
< li >
                
< p >
                    用户名:
</ p >
                
< input  id ="Text1"  type ="text"   />
            
</ li >
            
< li >
                
< p >
                    密
&nbsp;&nbsp; 码: </ p >
                
< input  id ="Text2"  type ="text"   />
            
</ li >
            
< li >
                
< input  id ="button"  type ="button"  value ="关闭"  onclick ="btnclick()"   /></ li >
        
</ ul >
    
</ div >
    
< div  class ="clear" >
    
</ div >
</ body >
</ html >
目录
相关文章
|
1月前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
JS点击切换背景图
JS点击切换背景图
35 0
|
3天前
|
JavaScript 前端开发
JS实现键盘事件(回车)的登录
JS实现键盘事件(回车)的登录
8 0
|
3天前
|
JavaScript 前端开发
JS生成登录验证码
JS生成登录验证码
10 2
|
13天前
|
前端开发 NoSQL 数据库
切图仔做全栈:React&Nest.js社区平台(一)——基础架构与邮箱注册、JWT登录实现
切图仔做全栈:React&Nest.js社区平台(一)——基础架构与邮箱注册、JWT登录实现
|
16天前
|
前端开发 JavaScript 数据安全/隐私保护
next.js博客搭建_六一卡通风格的登录注册(第二步)
next.js博客搭建_六一卡通风格的登录注册(第二步)
7 0
|
29天前
|
存储 JavaScript
如何用JS实现退出登录?
如何用JS实现退出登录?
21 1
|
1月前
|
JavaScript
js生成二维码点击可放大
js生成二维码点击可放大
|
2月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
20 0
JS+CSS3点击粒子烟花动画js特效
|
2月前
|
JavaScript 前端开发
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)