Jquery+div+css Implement popup Login window

The basic idea is to hide (dispaly:none) and then display the translucent mask layer through

z-index:9998;

z-index:9999;

The larger the value, the more forward

Index.html

<! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

CSS file Lanrenzhijia.css
/*  code collation: Lazy People's home  www.lanrenzhijia.com */body, h1, h2, h3, h4, h5, h6, &NBSP;P,&NBSP;BLOCKQUOTE,&NBSP;PRE,&NBSP;CODE,&NBSP;DEL,&NBSP;DFN,&NBSP;EM,&NBSP;IMG,&NBSP;STRONG,&NBSP;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 collation: Lazy People's 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}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, button, input, select, 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,  #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;   &nbSp;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: #2176D3  0  1px 2px 0 inset;    border-color:  #3079ED;}. Btn-primary:focus {    border-color: #4d90fe;     outline:none}/*   Code collation: Lazy People's 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: &nbSp;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 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}/*  code collation: Lazy People's home  www.lanrenzhijia.com */ 

Effect

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/74/E8/wKioL1YuHnHhQ6KZAACPOU0cqpA344.jpg "title=" capture. PNG "alt=" Wkiol1yuhnhhq6kzaacpou0cqpa344.jpg "/>



Reference Learning Videos:

http://www.tudou.com/programs/view/XBRWDnRmehA/


Web pop-up solution layer
http://layer.layui.com/


This article is from the "Nothing qq:934033381" blog, please be sure to keep this source http://tianxingzhe.blog.51cto.com/3390077/1706520
Jquery+div+css Implement popup Login window