文档章节

制作div弹窗的遮盖层

leona_lily
 leona_lily
发布于 2015/04/07 09:53
字数 413
阅读 20
收藏 0
遮盖层的思想就是单独写一个div用于遮盖整个屏幕,设置z-index的值大一些就好,上面的弹窗就是一个div的显隐,只需要show的时候把这个div的z-index的值比遮盖层的值大一些就可以

可以使用的代码如下:

html:


<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>大前端jQuery弹出层效果 - 站长素材</title>

<link rel="stylesheet" href="css/theme.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="sc.chinaz.com" 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>

<div style="text-align:center;clear:both"><br><br><br><br><br><br><br><br><br>

<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p><br>

<p>来源:<a href="http://www.97zzw.com/" target="_blank">97站长网</a></p>

</div>

</body>

</html>
css:

.theme-popover-mask {

    background: none repeat scroll 0 0 #000;

    display: none;

    height: 100%;

    left: 0;

    opacity: 0.4;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 9998;

}             //遮盖层css

.theme-popover {

    background-color: #fff;

    border: 2px solid #666;

    border-radius: 5px;

    box-shadow: 0 0 10px #666;

    display: none;

    height: 360px;

    left: 50%;

    margin: -180px 0 0 -330px;

    position: fixed;

    top: 50%;

    width: 660px;

    z-index: 9999;

}              //弹窗css





© 著作权归作者所有

共有 人打赏支持
leona_lily
粉丝 9
博文 97
码字总数 39219
作品 0
朝阳
程序员
JS实现遮罩层

用JS实现一个常见的遮罩层,该遮罩层包含三部分(触发按钮,透明遮罩层,弹出对话层),并分解各部分(分为HTML,CSS,JavaScript),逐一讲解实现的机理。最终效果如下图: HTML结构 一个用来触...

MangoGan
2017/11/24
0
0
ecshop弹出登录框的效果

1.打开你的模版下library/memberinfo.lbi 文件,在里面添加如下的代码。 <script type=”text/javascript”> function loginmodule(){//点击登录时,调用的函数 var mengban=document.getEl......

越野小生
2016/05/07
82
0
前端页面弹出问题让弹窗在视频上面呢?不被视频遮盖,??

问题描述: 第一个页面上半部分是视频,下半部分是试题,答完三个问题之后 会有一个弹窗,如何能在视频播放的同时,让弹窗在视频上面呢?不被视频遮盖,?? 源码如下: 看私房电影赢私房基金...

JavaOlder
2015/07/18
1K
3
mpvue & 小程序开发过程中的坑

业务需要,最近开始做小程序开发,使用的是mpvue,做的过程中踩了一些坑,小程序的也有,mpvue的也有。感觉小程序中textarea巨多坑,还有许多找不到原因的,莫名其妙的坑。总得来说小程序并不...

花卷爱学习
06/29
0
0
layer 3.1.0 发布,经典的 Web 弹层解决方案

layer 是一款经典的 Web 弹层组件,拥有全方位的弹层解决方案。尽管目前是作为 layui 的独立组件来维护,但它比 layui 出现得要早得多。多年来,layer 凭借在网页弹窗方面的出色表现,被广泛...

贤心
2017/09/13
1K
18

没有更多内容

加载失败,请刷新页面

加载更多

Django支持中文

django是支持中文界面, 先找到Django语言包安装目录,我的在: /usr/local/python3/lib/python3.6/site-packages/django/conf/locale 有zh-Hans和zh-Hant两个文件, 其中zh-Hans是简体中文,...

MichaelShu
14分钟前
1
0
迷宫问题:顺序栈解法

采用顺序栈以及回溯法,一个比较简单的问题,但是从来没有写过,也算是弥补一下自己欠数据结构的债吧,居然也花了一个半小时,无地自容了。。 定义好数据结构求解算法就显得容易一些了。 st...

LoSingSang
20分钟前
0
0
Zookeeper 概述及应用场景

一、概述 分布式协调技术,主要用来解决分布式环境当中多个进程之间的同步控制,让他们有序的去访问某种临界资源,防止造成"脏数据"的后果。 ZooKeeper是一个分布式的,开放源码的分布式应用...

PeakFang-BOK
28分钟前
0
0
(译)OpenGL ES2.0 – Iphone开发指引

教程截图: OpenGL ES 是可以在iphone上实现2D和3D图形编程的低级API。 如果你之前接触过 cocos2d,sparrow,corona,unity 这些框架,你会发现其实它们都是基于OpenGL上创建的。 多数程序员...

robslove
38分钟前
0
0
金九银十跳槽季,程序员面试点解析之Java专场

前言 近年来Java工程师这个岗位炙手可热,市场需求大,学习Java的人也越来越多,所以IT企业与求职者的选择都比较多,那么IT企业在面试时都会提哪些问题呢。下面为大家分享 Java高级工程师面试...

老道士
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部