文档章节

制作div弹窗的遮盖层

leona_lily
 leona_lily
发布于 2015/04/07 09:53
字数 413
阅读 19
收藏 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
博文 96
码字总数 37848
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部