基于Jquery+div+css实现弹出登录窗口(代码超简单) - [技术教程]

导航首页 » 技术教程 » 基于Jquery+div+css实现弹出登录窗口(代码超简单)

全站头部文字我要出现在这里

备案二级域名 8元起

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

具体代码详情如下所示：

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

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

值越大越在前面

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点击弹出登陆窗口</title>
<link rel="stylesheet" href="http://www.gimoo.net/t/1904/css/lanrenzhijia.css" media="all">
<script src="http://www.gimoo.net/t/1904/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="http://www.gimoo.net/t/1904/5cc56b92dce94.html">点击查看效果</a>
</div>
<div class="theme-popover">
   <div class="theme-poptit">
     <a href="http://www.gimoo.net/t/1904/5cc56b92dce94.html" title="关闭" class="close">×</a>
     <h3>登录 是一种态度</h3>
   </div>
   <div class="theme-popbod dform">
      <form class="theme-signin" name="loginform" action="" method="post">
        <ol>
           <li><h4>你必须先登录！</h4></li>
           <li><strong>用户名：</strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li>
           <li><strong>密码：</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li>
           <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li>
        </ol>
      </form>
   </div>
</div>
<div class="theme-popover-mask"></div>
</body>
</html>

css文件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
}
/*

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

css

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类