HTML基于bootstrap的登录弹出框

需要引用bootstrap的js库。

js中的引用方式，用jQuery的fadein fadeout;

$(".theme-popover.login").fadeIn(); //打开登录框

/**
*登录框
*/
.theme-popover {z-index:9999;position:fixed;top:25%;left:35%;width:30%;height:360px;border-radius:5px;border:solid 2px #666;background-color:#fff;display:none;box-shadow:0 0 10px #666;}
.theme-poptit {border-bottom:1px solid #ddd;padding:12px;position:relative;background:#f3f3f3;}
.theme-poptit h3{padding:0;margin:0;text-indent:35px;font-family:"微软雅黑","宋体";color:#333;font-weight:normal;}
.theme-popbod {padding:20px 15px;color:#444;height:148px;}
.theme-popbom {padding:15px;background-color:#f6f6f6;border-top:1px solid #ddd;border-radius:0 0 5px 5px;color:#666;}
.theme-popbom a {margin-left:8px}
.theme-poptit .close {float:right;color:#999;padding:5px;margin:-2px -5px -5px;font:bold 14px/14px simsun;text-shadow:0 1px 0 #ddd;}
.theme-poptit .close:hover {color:#444;}
.theme-poptit img{display:block;float:left;width:24px;height:24px;position:absolute;top:13px;left:15px;}

   

        ×
       
       

登录

   

   

           

               

                    用户名：
                   

                       
                   

               

               

                    密码 ：
                   

                       
                   

               

               

                    验证码：
                   

                       
                   

                   

                       
                   

               

               

                   

                        登  录
                        <%-- 登    录 --%>