Jquery + div + css implementation pop-up login window

Jquery + div + css implementation pop-up login window
The basic idea is to hide (dispaly: none) and then display it. The translucent mask layer uses z-index: 9998; z-index: 9999; the larger the value, the more index.html

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
Cssfile lanrenzhijia.css
/* Code sorting: lazy home www.lanrenzhijia.com */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}/* Code sorting: lazy home www.lanrenzhijia.com */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: 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}: 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, button, input, select, textarea, code {font-size: 12px; font-family: microsoft yahei; color: #444;}/* window * // * input */. EPT {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 ;}. EPT: 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, # 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: # 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, # 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 ,. the btn-primary.btn-active {box-shadow: #2176D3 0 1px 2px 0 inset; border-color: # 3079ED ;}. btn-primary: focus {border-color: # 4d90fe; outline: none}/* code: lazy home www.lanrenzhijia.com */. 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 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 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 }. indium-gray ,. feed-mail-indium {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 strong {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 }/*