点击文字弹出一个DIV层窗口代码 

        .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; 

        } 

                    X             用户登录                                                                                                 点击此处注册                                                     

        $(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'

        }

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

#notClickDiv{     filter:alpha(Opacity=35);opacity:0.35;        /*设置不透明度为35%*/     background:#000000;                        /*设置背景为黑色*/     position:absolute;                            /*设置定位方式为绝对位置*/     display:none;                                /*设置该标记显示*/     z-index:9;                                    /*设置层叠顺序*/     top:0px;                                    /*设置顶边距*/     left:0px;                                    /*设置左边距*/     margin: 0px;     padding: 0px; }

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

function loginSubmit(form2){     if(form2.username.value==""){        //验证用户名是否为空         alert("请输入用户名！");form2.username.focus();return false;     }     if(form2.pwd.value==""){        //验证密码是否为空         alert("请输入密码！");form2.pwd.focus();return false;     }         var param="username="+form2.username.value+"&pwd="+form2.pwd.value;     //将登录信息连接成字符串，作为发送请求的参数     var loader=new net.AjaxRequest("UserServlet?action=login",deal_login,onerror,"POST",encodeURI(param)); } function onerror(){     alert("您的操作有误"); } function deal_login(){     /*****************显示提示信息******************************/     var h=this.req.responseText;     h=h.replace(/\s/g,"");    //去除字符串中的Unicode空白     alert(h);     if(h=="登录成功,哈哈！"){         window.location.href="DiaryServlet?action=listAllDiary";     }else{         form2.username.value="";//清空用户名文本框          form2.pwd.value="";//清空密码文本框         form2.username.focus();//让用户名文本框获得焦点     }      }

3.实现登录

                      ; 》; 欢迎 ${sessionScope.userName} 登录九宫格日记网！                            ; 》; 欢迎光临九宫格日记网！                                  首页                   ; | ;登录         ; | ;注册         ; | ;找回密码                                ;| ;我的日记         ; | ;写九宫格日记         ; | ;退出登录          

4.隐藏的登录窗口

      清爽夏日九宫格日记网--用户登录                              用户名：          密;;;;码：;找回密码                 ;                           -