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

具体代码详情如下所示：

基本思路先隐藏（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实现弹出登录窗口，代码很简单吧，希望对大家有用。

赞 (0)

相关推荐

  • jQuery实现弹出窗口中切换登录与注册表单

    jQuery实现弹出窗口中切换登录与注册表单

    当点击页面中的登录或注册按钮时,将会弹出一个模态窗口,就是一个弹出层,我们可以在弹出层上轻松的切换登录与注册表单,极大的方便用户,不需要关闭层再去点击转向其他操作,在很多网站上已经广泛应用. 本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果. HTML 我们现在主页面上设置两个链接按钮,即登录和注册按钮. <nav class="main_nav"> <ul> <li><a class="cd-signin&

  • jQuery实现弹出窗口弹出div层的实例代码

    通过今天的jquery实例学习,我们要达到这样的效果:点击页面的链接,弹出一个div层,同时页面的其他部分变灰并且不能点击:无论是改变浏览器窗口大小还是下拉滚动条,这个弹出层都能始终保持居中:点击页面的关闭按钮,弹出层消失,页面恢复原样. 这里借鉴之前的一篇文章<基于jQuery的固定飘浮层>,使弹出窗口可以始终固定在浏览器的正中间.在这里有一个要点,就是如何使页面的其他地方在弹出窗口的同时变灰.我使用的方法就是在点击链接弹出div层的时候,给页面增加一个div层,这个层就"负责&q

  • jQuery控制DIV层实现由大到小，由远及近动画变化效果

    jQuery控制DIV层实现由大到小，由远及近动画变化效果

    本文实例讲述了jQuery控制DIV层实现由大到小,由远及近动画变化效果.分享给大家供大家参考.具体如下: 这里介绍jQuery控制DIV由大到小,由远及近动画变化效果,使用jquery生成动画效果的一个小例子,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-div-animate-cha-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • jquery实现弹出窗口效果的实例代码

    JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来. 其大致步骤为: •创建一个装载弹出窗口的div 复制代码 代码如下: <html>  <head>    <title>jQuery实例1:浮动窗口</title>    <meta http-equiv="Content-Type" content="te

  • jQuery实现DIV层收缩展开的方法

    本文实例讲述了jQuery实现DIV层收缩展开的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xhtm

  • jQuery实现鼠标滑过Div层背景变颜色的方法

    本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法.分享给大家供大家参考,具体如下: 一.先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二.代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Subscribe策略</ti

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

    具体代码详情如下所示: 基本思路先隐藏(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

  • 基于jQuery实现点击弹出层实例代码

    jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit

  • jquery 弹出登录窗口实现代码

    jquery 弹出登录窗口实现代码

    主要层左右居中,设置left等于窗口宽除二减去自身层宽除二就居中了,至于窗口上下居中我没做到,固定了top等于滚动条隐去的 scrollTop加上50px; 当事件触发这个类时,首先判断一下两个层是否已经append到body里面,否则每次触发它就一直增加增加了.设置了五个参数title. content.width.height.cssName,它们分别定义了层标题.层内内容.层宽.层高.层内容的样式名.层内内容又设置了url. text.id.iframe四种加载方式,通过ajax以get或

  • 基于JQuery实现页面定时弹出广告

    Js相关技术 定时器: ​ setInterval & clearInterval ​ setTimeout & clearTimeout 显示: img.style.display = "block" 隐藏: img.style.display = "none" img 对象 style属性: style对象 需求分析 当用户打开界面,3秒钟之后弹出广告,这个广告显示5秒钟,隐藏广告 技术分析 定时器: setTimeout 显示和隐藏: styl

  • 基于jQuery的网页右下角弹出广告(IE7,firefox)

    演示代码: 测试 .divCss{ bottom:0; display:block; height:25px; overflow:hidden; padding:0; position:fixed; right:20px; } .contentCss{ background:#666; height:200px; width:200px; } .contentCssHeight{ } .titleCss{ width:200px; height:25px; line-height:25px; t

  • jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

    jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

    本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code

  • js实现点击弹窗弹出登录框

    js实现点击弹窗弹出登录框

    本文实例为大家分享了js实现点击弹窗弹出登录框的具体代码,供大家参考,具体内容如下 1 图片预览 2 index.html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

  • js之弹出式窗口代码生成器

    弹出式窗口代码生成器 要完成此效果把如下代码加入到区域中 -1){ space=txt.indexOf(wrd); txt=txt.substring(0,space)+smut+txt.substring((space+wrdl),txt.length);} smut=">"; replacewords="> "; space=replacewords.indexOf(" "); wrd=replacewords.substring

  • js+CSS实现弹出居中背景半透明div层的方法

    本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • css和js实现弹出登录居中界面完整代码

    css和js实现弹出登录居中界面完整代码

    我实现的这个和许多网站上的登录弹出窗口差不多,大家举一反三,先看我写完后的结果. 点击创建相册后 会在这个屏幕的中间显示创建相册的表单,整个背景颜色变暗,点击右上角的X会关闭这个表单. html代码 创建按钮 <li id="create"><a href="#form" rel="external nofollow" ><span>创建相册</span></a></li>

随机推荐