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文件lanrenzhijia.css

/* 代码整理：懒人之家 www.lanrenzhijia.com */
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
}/* 代码整理：懒人之家 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 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
}
/* 代码整理：懒人之家 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;
    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
}
/* 代码整理：懒人之家 www.lanrenzhijia.com */

效果

参考学习视频：

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

web弹窗层解决方案layer

http://layer.layui.com/

时间： 2024-10-27 00:18:32

Jquery+div+css实现弹出登录窗口的相关文章

div弹出登录窗口

<meta charset="utf-8"/> <script type="text/javascript"> //弹出式登录 function ShowNo() //隐藏两个层 { document.getElementById("doing").style.display = "none"; document.getElementById("divLogin").style.di

帝国CMS弹出登录窗口实现方法

帝国CMS弹出登录窗口实现方法 看到好多网站都用弹出登陆窗口让用户登陆注册,其实就是用JS调用一个DIV层实现的 今天我用帝国CMS具体讲一下怎么实现这个效果: 一.打开帝国CMS后台-公共模板-JS讲用登陆模板 把附件里的调用登陆模板代码复制进去-修改 二.在你的首页加入CSS样式和JS代码 1.CSS: <style> #lggoodBox{ margin:0 auto; padding:0px; text-align:left; width:370px; height:220px; ba

自己封装的一个纯div+css样式弹出泡泡消息框

也许很多框架都自带了这样的弹出泡泡框,但我没接触过,现在需要用,于是便自己封装了一个,虽然还不完美,但已经可以用了.这个小控件可以重定义样式,通过传递配置参数,或修改默认配置参数都可以进行样式调整.不管怎么说,就当是练手,或给新人提供一个参考学习的机会也行吧 /* * js 对象合并 */ function extend(newObj, defaultObj) { var result = {}; for (var p in defaultObj) { result[p] = defaultOb

jQuery插件---轻量级的弹出窗口wBox

Box Demo wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层,Ajax页面,iframe嵌入页面…… 背景透明度可以根据实际情况进行调节,甚至不设置背景 可以根据需要添加wBox标题 支持设置窗口位置,默认为在中心显示 支持callback函数 支持html内容自定义 img灯箱看图功能 支持在wBox显示#ID的内容 支持Ajax页面内容 支持设置背景,不设

JQuery+CSS3实现封装弹出登录框效果

原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个项目,但是由于不使用Bootstrap自带的JS插件,所以这个弹出登录框就自己实现封装来调用,做出来的效果其实和Bootstrap自带的效果差不多.OK,看一下效果图: 其实很简单,首先是html结构: <div id="mask"></div> <!-- 半

第一百三十三节，JavaScript，封装库--弹出登录框

JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事件,当窗口的大小变化时触发函数 /** yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面, * 注意:使用此方法时,首先要在css里将目标区块设置成(绝对定位,position: absolute;) **/ feng_zhuang_ku.prototype.yuan_su_j

jQuery制作信息提示弹出层插件【推荐】

给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.?1. [代码][JavaScript]代码 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><!--[if IE 6]><script type="text/javascript" src="js/iepngfix_tilebg

网页上弹出pop窗口实例，(document).height()与$(window).height()的区别

#dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}        #dvpop{position:absolute;display:none;width:auto; height:auto; z-in

javascript--自定义弹出登陆窗口（弹出窗）

web开发中浏览器对象封装了诸如prompt.alert.confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框.消息提示框等.本文利用弹出用户登陆框示例,对这部分知识做个小结. 示例需求:点击按钮,弹出登陆窗口,且该窗口可以拖拽,弹出窗口的同时,整个页面变成灰色半透明. 效果图如下:图1是起始页面,图2是点击"点击,弹出登陆框"按钮后页面,图3是登陆框自由拖动后页面.