首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 27, 2015

具体代码详情如下所示：

基本思路先隐藏（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="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：;">点击查看效果</a>
</div>
<div class="theme-popover">
   <div class="theme-poptit">
     <a href="javascript：;" 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实现弹出登录窗口，代码很简单吧，希望对大家有用。

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

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
js类中的公有变量和私有变量
Jul 24 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
SeaJS入门教程系列之完整示例（三）
Mar 03 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
基于javascript实现碰撞检测
Mar 12 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 #Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 #Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 #Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 #Javascript
jQuery无刷新分页完整实例代码
Oct 27 #Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 #Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 #Javascript
click(1) vuex(1) Vue(10) Set接口(1) 本地化存储(1) Storage(1) HashSet集合(1) OutputStream(1) InputStream(1) persistedstate(1)
You might like
德劲1102收音机的打理维修案例
2021/03/02 无线电
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php中final关键字用法分析
2016/12/07 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
python 实现的车牌识别项目
2021/01/25 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
Ralph Lauren法国官网：美国高品味时装品牌
2017/12/08 全球购物
英国最大的独立玩具专卖店：The Entertainer
2019/09/06 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
实习鉴定范文
2013/12/19 职场文书
春节晚会主持词
2014/03/24 职场文书
元旦晚会活动总结
2014/07/09 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
党员倡议书
2015/01/19 职场文书
员工离职感谢信
2015/01/22 职场文书
介绍信范文
2015/01/31 职场文书
送达通知书
2015/04/25 职场文书
毕业酒会致辞
2015/07/29 职场文书