Based on Jquery+div+css implementation of pop up login window of code super simple
- 2020-09-16 07:19:27
- OfStack
The specific code details are as follows:
The basic idea is to hide (dispaly: none) and then show, translucent mask layer through
z-index:9998;
z-index:9999;
The higher the value, the higher the value
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery Click the popup login window </title>
<link rel="stylesheet" href="css/lanrenzhijia.css" media="all">
<script src="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>
<div class="theme-buy">
<a class="btn btn-primary btn-large theme-login" href="javascript : ;"> Click to see what it looks like </a>
</div>
<div class="theme-popover">
<div class="theme-poptit">
<a href="javascript : ;" title=" Shut down " class="close"> x </a>
<h3> The login is 1 Kind of attitude </h3>
</div>
<div class="theme-popbod dform">
<form class="theme-signin" name="loginform" action="" method="post">
<ol>
<li><h4> You must log in first! </h4></li>
<li><strong> User name: </strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li>
<li><strong> Password: </strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li>
<li><input class="btn btn-primary" type="submit" name="submit" value=" deng record " /></li>
</ol>
</form>
</div>
</div>
<div class="theme-popover-mask"></div>
</body>
</html>
css file 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: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;
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
}
.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 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
}
/*Above code is this site to share based on Jquery+div+css implementation pop-up login window, the code is very simple, I hope to be useful to you.