基于Jquery+div+css实现弹出登录窗口(代码超简单)
具体代码详情如下所示：
基本思路先隐藏（dispaly：none）再显示，半透明蒙版层通过
z-index:9998;
z-index:9999;
值越大越在前面
index.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jquery点击弹出登陆窗口</title>
<linkrel="stylesheet"href="css/lanrenzhijia.css"media="all">
<scriptsrc="js/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
$('.theme-login').click(function(){
$('.theme-popover-mask').fadeIn(100);
$('.theme-popover').slideDown(200);
})
$('.theme-poptit.close').click(function(){
$('.theme-popover-mask').fadeOut(100);
$('.theme-popover').slideUp(200);
})
})
</script>
</head>
<body>
<divclass="theme-buy">
<aclass="btnbtn-primarybtn-largetheme-login"href="javascript：;">点击查看效果</a>
</div>
<divclass="theme-popover">
<divclass="theme-poptit">
<ahref="javascript：;"title="关闭"class="close">×</a>
<h3>登录是一种态度</h3>
</div>
<divclass="theme-popboddform">
<formclass="theme-signin"name="loginform"action=""method="post">
<ol>
<li><h4>你必须先登录！</h4></li>
<li><strong>用户名：</strong><inputclass="ipt"type="text"name="log"value="lanrenzhijia"size="20"/></li>
<li><strong>密码：</strong><inputclass="ipt"type="password"name="pwd"value="***"size="20"/></li>
<li><inputclass="btnbtn-primary"type="submit"name="submit"value="登录"/></li>
</ol>
</form>
</div>
</div>
<divclass="theme-popover-mask"></div>
</body>
</html>
css文件jiaobenzhijia.css
body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,del,dfn,em,img,strong,dd,dl,dt,li,ol,ul,fieldset,form,label,button,input,table,caption,tbody,tfoot,thead,tr,th,td,menu{
margin:0;
padding:0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
display:block
}
audio,canvas,video{
display:inline-block;
*display:inline;
*zoom:1
}
audio:not([controls]){
display:none
}
table{
border-collapse:collapse;
border-spacing:0;
empty-cells:show
}
ol,ul,menu{
list-style:none
}
img{
border:0
}
a:focus{
outline:none
}
em,i{
font-style:normal;
}
button,input,select,textarea{
font-size:100%;
margin:0;
vertical-align:-3px;
outline:none;
}
button,input{
border:1pxsolid;
outline:none;
line-height:normal;
*overflow:visible
}
button::-moz-focus-inner,input::-moz-focus-inner{
border:0;
padding:0
}
button,input[type="button"],input[type="reset"],input[type="submit"]{
cursor:pointer;
-webkit-appearance:button
}
input[type="search"]{
-webkit-appearance:textfield;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box
}
input[type="search"]::-webkit-search-decoration{
-webkit-appearance:none
}
textarea{
overflow:auto;
vertical-align:top
}
::selection{
background:#72d0eb;
color:#fff;
text-shadow:none
}
::-moz-selection{
background:#72d0eb;
color:#fff;
text-shadow:none
}
*[hidden]{
display:none
}
a{
color:#0088DB;
text-decoration:none;
cursor:pointer
}
a:hover{
color:#2A5E8E
}
.clearfix:after,.central:after,.widgetul:after,.paging:after,.pagenav:after,.base-tit:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix,.central,.widgetul,.paging,.pagenav,.base-tit{
*+height:1%;
}
body,button,input,select,textarea,code{
font-size:12px;
font-family:microsoftyahei;
color:#444;
}
/*window*/
/*input*/
.ipt{
border:solid1px#d2d2d2;
border-left-color:#ccc;
border-top-color:#ccc;
border-radius:2px;
box-shadow:inset01px0#f8f8f8;
background-color:#fff;
padding:4px6px;
height:21px;
line-height:21px;
color:#555;
width:180px;
vertical-align:baseline;
}
.ipt-mini{
width:140px;
padding:1px3px;
}
.ipt:focus{
border-color:#95C8F1;
box-shadow:004px#95C8F1;
}
/*btn*/
.btn{
position:relative;
cursor:pointer;
display:inline-block;
vertical-align:middle;
font-size:12px;
font-weight:bold;
height:27px;
line-height:27px;
min-width:52px;
padding:012px;
text-align:center;
text-decoration:none;
border-radius:2px;
border:1pxsolid#ddd;
color:#666;
background-color:#f5f5f5;
background:-webkit-linear-gradient(top,#F5F5F5,#F1F1F1);
background:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);
background:linear-gradient(top,#F5F5F5,#F1F1F1);
}
input.btn{
height:29px;
}
.btn:hover{
border-color:#c6c6c6;
color:#333;
background-color:#f8f8f8;
background:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
background:-moz-linear-gradient(top,#f8f8f8,#f1f1f1);
background:linear-gradient(top,#f8f8f8,#f1f1f1);
box-shadow:#ddd01px1px0;
}
.btn:active,.btn.btn-active{
box-shadow:#ddd01px2px0inset;
border-color:#c6c6c6;
}
.btn:focus{
border-color:#4d90fe;
outline:none
}
.btn-primary{
border-color:#3079ED;
color:#F3F7FC;
background-color:#4D90FE;
background:-webkit-linear-gradient(top,#4D90FE,#4787ED);
background:-moz-linear-gradient(top,#4D90FE,#4787ED);
background:linear-gradient(top,#4D90FE,#4787ED);
}
.btn-primary:hover{
border-color:#2F5BB7;
color:#fff;
background-color:#4D90FE;
background:-webkit-linear-gradient(top,#4D90FE,#357AE8);
background:-moz-linear-gradient(top,#4D90FE,#357AE8);
background:linear-gradient(top,#4D90FE,#357AE8);
}
.btn-primary:active,.btn-primary.btn-active{
box-shadow:#2176D301px2px0inset;
border-color:#3079ED;
}
.btn-primary:focus{
border-color:#4d90fe;
outline:none
}
.theme-buy{
margin-top:10%;
text-align:center;
}
.theme-gobuy,.theme-signin{
font-size:15px;
}
.theme-price{
position:relative;
bottom:-6px;
font-family:microsoftyahei,Arial,Helvetica,sans-serif;
margin-right:20px;
font-weight:bold;
color:#f60;
line-height:32px;
font-size:24px;
display:inline-block;
}
.theme-pricedfn{
font-style:normal;
font-size:18px;
margin-right:2px;
}
.theme-desc{
padding:30px;
}
.theme-version{
padding:30px;
}
.theme-popover-mask{
z-index:9998;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.4;
filter:alpha(opacity=40);
display:none
}
.theme-popover{
z-index:9999;
position:fixed;
top:50%;
left:50%;
width:660px;
height:360px;
margin:-180px00-330px;
border-radius:5px;
border:solid2px#666;
background-color:#fff;
display:none;
box-shadow:0010px#666;
}
.theme-poptit{
border-bottom:1pxsolid#ddd;
padding:12px;
position:relative;
}
.theme-popbod{
padding:60px15px;
color:#444;
height:148px;
}
.theme-popbom{
padding:15px;
background-color:#f6f6f6;
border-top:1pxsolid#ddd;
border-radius:005px5px;
color:#666
}
.theme-popboma{
margin-left:8px
}
.theme-poptit.close{
float:right;
color:#999;
padding:5px;
margin:-2px-5px-5px;
font:bold14px/14pxsimsun;
text-shadow:01px0#ddd
}
.theme-poptit.close:hover{
color:#444;
}
.btn.theme-reg{
position:absolute;
top:8px;
left:43%;
display:none
}
.inp-gray,.feed-mail-inp{
border:1pxsolid#ccc;
background-color:#fdfdfd;
width:220px;
height:16px;
padding:4px;
color:#444;
margin-right:6px
}
.dform{
padding:80px60px40px;
text-align:center;
}
.dform.ipt_error{
background-color:#FFFFCC;
border-color:#FFCC66
}
.dform-tip{
display:none;
background-color:#080;
color:#fff;
line-height:42px;
margin-top:10px;
font-size:14px;
}
.dform-tip-errer{
background-color:#CF301A;
}
.dform-tipa{
display:inline-block;
padding:020px;
margin-left:10px;
background-color:#FFE924;
color:#CF301A;
}
.dform-login{
padding:0;
height:270px;
overflow:hidden;
}
.dform-loginiframe{
height:470px;
margin-top:-180px;
}
.theme-signin{
margin:-50px-20px-50px90px;
text-align:left;
font-size:14px;
}
.theme-signinh4{
color:#999;
font-weight:100;
margin-bottom:20px;
font-size:12px;
}
.theme-signinli{
padding-left:80px;
margin-bottom:15px;
}
.theme-signinlistrong{
float:left;
margin-left:-80px;
width:80px;
text-align:right;
line-height:32px;
}
.theme-signin.btn{
margin-bottom:10px;
}
.theme-signinp{
font-size:12px;
color:#999;
}
.theme-desc,.theme-version{
padding-top:0
}
/*
以上代码就是小编给大家分享的基于Jquery+div+css实现弹出登录窗口，代码很简单吧，希望对大家有用。