基于Jquery+div+css实现弹出登录窗口(代码超简单)

具体代码详情如下所示：

基本思路先隐藏（dispaly：none）再显示，半透明蒙版层通过

z-index:9998; z-index:9999;

值越大越在前面

index.html

rush:js;">

登录 是一种态度

你必须先登录！

用户名：

密码：

css文件jiaobenzhijia.css

rush:css;"> body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,del,dfn,em,img,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,menu { list-style:none } img { border:0 } a:focus { outline:none } em,i { font-style: normal; } button,select,textarea { font-size:100%; margin:0; vertical-align:-3px; outline:none; } button,input { border:1px solid; 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,.widget ul:after,.paging:after,.pagenav:after,.base-tit:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clearfix,.central,.widget ul,.paging,.pagenav,.base-tit { *+height:1%; } body,textarea,code { font-size:12px; font-family:microsoft yahei; color: #444; } /*window*/ /* input */ .ipt { border: solid 1px #d2d2d2; border-left-color: #ccc; border-top-color: #ccc; border-radius: 2px; Box-shadow: inset 0 1px 0 #f8f8f8; background-color: #fff; padding: 4px 6px; height: 21px; line-height: 21px; color: #555; width: 180px; vertical-align: baseline; } .ipt-mini { width: 140px; padding: 1px 3px; } .ipt:focus { border-color: #95C8F1; Box-shadow: 0 0 4px #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: 0 12px; text-align: center; text-decoration: none; border-radius: 2px; border: 1px solid #ddd; color: #666; background-color: #f5f5f5; background: -webkit-linear-gradient(top,#F5F5F5,#F1F1F1); background: -moz-linear-gradient(top,#F1F1F1); background: linear-gradient(top,#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,#f1f1f1); background:linear-gradient(top,#f1f1f1); Box-shadow:#ddd 0 1px 1px 0; } .btn:active,.btn.btn-active { Box-shadow:#ddd 0 1px 2px 0 inset; 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,#4787ED); background: linear-gradient(top,#4787ED); } .btn-primary:hover { border-color:#2F5BB7; color:#fff; background-color: #4D90FE; background: -webkit-linear-gradient(top,#357AE8); background: -moz-linear-gradient(top,#357AE8); background: linear-gradient(top,#357AE8); } .btn-primary:active,.btn-primary.btn-active { Box-shadow:#2176D3 0 1px 2px 0 inset; 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: microsoft yahei,Arial,Helvetica,sans-serif; margin-right: 20px; font-weight: bold; color: #f60; line-height: 32px; font-size: 24px; display: inline-block; } .theme-price dfn { 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:-180px 0 0 -330px; 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; } .theme-popbod { padding:60px 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; } .btn.theme-reg { position: absolute; top: 8px; left: 43%; display: none } .inp-gray,.Feed-mail-inp { border:1px solid #ccc; background-color:#fdfdfd; width:220px; height:16px; padding:4px; color:#444; margin-right:6px } .dform { padding:80px 60px 40px; 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-tip a { display: inline-block; padding: 0 20px; margin-left:10px; background-color: #FFE924; color: #CF301A; } .dform-login { padding:0; height: 270px; overflow: hidden; } .dform-login iframe { height: 470px; margin-top: -180px; } .theme-signin { margin: -50px -20px -50px 90px; text-align:left; font-size: 14px; } .theme-signin h4 { color:#999; font-weight:100; margin-bottom: 20px; font-size: 12px; } .theme-signin li { padding-left: 80px; margin-bottom: 15px; } .theme-signin li h3 { float: left; margin-left: -80px; width: 80px; text-align: right; line-height: 32px; } .theme-signin .btn { margin-bottom: 10px; } .theme-signin p { font-size: 12px; color: #999; } .theme-desc,.theme-version { padding-top: 0 } /*

以上代码就是小编给大家分享的基于Jquery+div+css实现弹出登录窗口，代码很简单吧，希望对大家有用。