Jquery+div+css实现弹出登录窗口

最新推荐文章于 2022-05-27 15:11:11 发布
最新推荐文章于 2022-05-27 15:11:11 发布
阅读量6.3k 收藏 14
点赞数
分类专栏： J2EE/CSS/JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jethai/article/details/52345298
版权


基本思路先隐藏（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 */


效果


wKioL1YuHnHhQ6KZAACPOU0cqpA344.jpg




参考学习视频：


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



web弹窗层解决方案layer

http://layer.layui.com/



本文出自 “点滴积累” 博客，请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1706520

小小程序员1986
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap
siyangyuyangzhu的博客
09-19 667
这次写的是Bootstrap，用来记录一下 注：因为在这里面标签名也可以使用所以用中问的标签代替！！ 【内容】 主要讲的Bootstrap的概括 利用媒介查询，实时更改布局，达到更好展现内容的目的。 通俗得讲是：css根据屏幕宽度，自动调整网页div显示和布局，以适应不同尺寸屏幕优化浏览体验。根据浏览器的大小，一般设计2种。 优点：许多样式不需要自己去定义，而且提供了内置十几个插件，可以进行快速开...
用jQuery实现弹出窗口弹出div层
12-20
在页面加载后或者点击页面的某个链接时弹出一个div层，同时页面的其他地方会变灰
基于Jquery+div+css实现弹出登录窗口(代码超简单)
10-23
给大家介绍基于jquery div css三者相结合实现弹出登录窗口，实现大致思路是这样的：通过dispaly：none属性先隐藏在显示，感兴趣的朋友一起看看代码实现过程吧
详解Bootstrap缩略图组件及警示框组件
weixin_30538029的博客
04-28 143
缩略图组件 缩略图在网站中最常用的就是产品列表页面，一行显示几张图片，有的在图片底下带有标题、描述内容、按钮等信息。bootstrap框架将这部分独立成一个模块组件，通过类名.thumbnail配合bootstrap的网格系统来实现。下面是bootstrap缩略图组件不同版本的源码文件： LESS : tbumbnails.less SASS : _tbumbnails.scss 实现原理： 布...
css中按钮的四种状态
weixin_38169769的博客
12-07 1591
css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框 下面的例子中.btn1用focus按钮会按下，不弹起 　　　　　　.btn2用active按钮点击按下，会弹起 <button class="...
常用按钮样式
dingchunyi2321的博客
04-21 607
以下为css样式 1 .f-btn{display:inline-block;padding:6px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;color:#444;text-align:center;text-decoration:none;font-size:14px;lin...
jquery自定义弹出窗alert
weixin_45957302的博客
05-27 2587
jquery自定义弹窗窗
js弹出层
phantomes的专栏
10-15 331
&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;jQuery弹出层效果&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; c
jQuery写登录弹窗并居中显示
滕青山博客
11-24 1201
需求 做一个登录弹框，点击登录按钮就弹出，点击右上角×就关闭 居中显示，并且随着窗口变化而变化 让除了弹框以外区域灰色，也就是加个遮罩图层 效果 先放下仿照的效果图： 代码 HTML <div class="box_lg" style="display: none"> <div class="box_tit"> <a class="close" href="#">×</a> <div class="log
jquery 弹出 div 模式窗口
04-05
jquery.magnific-popup.js 弹出Div模式窗口
lanrenzhijia.js
04-01
懒人之家,懒人,懒人代码,jquery特效 -- JS网页特效代码收集...
懒人源码lanrenzhijia.com 2019第三方第四方支付平台源码+安装教程.rar
09-14
后台集成了多套官方接口，并且支持目前比较火的几种支付接口，比如支付宝的当面付，拼多多支付，支持加盟代理及代理后台，另外支持后台补单，源码全开源，支持二次开发 运行环境php+apache+mysql
jquery弹出div图层（带蒙板）
05-26
NULL 博文链接：https://hedahai119.iteye.com/blog/494349
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog...
纯css实现的DIV弹出窗口，周围变暗效果代码.zip
最新发布
09-26
有兴趣刚需的可以自己下载，非常实用的特效代码，可以完美运行，有能力的还可以二次修改！
基于jquery的blockui插件显示弹出层
12-01
blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。 blockui插件主要使用blockUI和... css：主要用来设置弹出层的样式，包括
Buttons样式设计
听海Movie的专栏
09-29 617
【HTML】 div class="page-header"> h1>Buttonsh1> div> p> button type="button" class="btn btn-lg btn-default">Defaultbutton> button type="button" class="btn btn-lg
jquery实现div弹出效果
07-08
这是一个弹出窗口的内容。 关闭 </div> ``` 2. CSS样式：为弹出容器DIV添加样式，使其以弹出的形式显示在页面上。例如： ```css #popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值