JQUERY+DIV+CSS Implementation Pop-up Login window

The basic idea first hides (Dispaly:none) again displays, the translucent mask layer passes

z-index:9998;

z-index:9999;

The bigger the value, the higher the front.

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:  www.lanrenzhijia.com */Body, h1, h2, h3, h4, h5, h6, the home of the lazy people, &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 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 &NBSP;0&NBSP;1PX&Nbsp;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, .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: The home of the lazy  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 -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; &NBSP;&NBSP;&NBSP;&NBSP;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 Home   www.lanrenzhijia.com */
 


Effect











Reference Learning Video:



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





Web Bullet window Layer Solution layer

http://layer.layui.com/





This article from the "Drip accumulation" blog, please be sure to keep this source http://tianxingzhe.blog.51cto.com/3390077/1706520