文档章节

制作div弹窗的遮盖层

leona_lily
 leona_lily
发布于 2015/04/07 09:53
字数 413
阅读 19
收藏 0
点赞 0
评论 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
博文 91
码字总数 37848
作品 0
朝阳
程序员
JS实现遮罩层

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

MangoGan ⋅ 2017/11/24 ⋅ 0

ecshop弹出登录框的效果

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

越野小生 ⋅ 2016/05/07 ⋅ 0

前端页面弹出问题让弹窗在视频上面呢?不被视频遮盖,??

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

JavaOlder ⋅ 2015/07/18 ⋅ 3

layer 3.1.0 发布,经典的 Web 弹层解决方案

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

贤心 ⋅ 2017/09/13 ⋅ 18

Bootstrap 使用对话框

使用模态框的弹窗组件需要三层 div 容器元素 分别为 modal(模态声明层) dialog(窗口声明层) content(内容层) 在内容层里面,还有三层,分别为 header(头部) body(主体) footer(注脚) 一个简单的...

hakase ⋅ 2016/09/24 ⋅ 0

div弹层遮盖select组件

IE6的情况下select框会遮住div层,必须用个iframe才能遮住select框 <div class="myAccounttc1" id="user_chooser" style="display: none; z-index: 99999; position: absolute;"> <form acti......

zhoujy ⋅ 2012/03/30 ⋅ 0

lhgdialog如何把页面上的元素直接作为dialog内容显示?

@lhgcore 你好,想跟你请教个问题: lhgdialog如何把页面上的元素直接作为dialog内容显示? 举个例子: 页面上有个隐藏元素 ................

gtd ⋅ 2012/05/26 ⋅ 1

组件--弹出层

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> ......

0000001 ⋅ 2015/09/06 ⋅ 0

jQuery zxxbox弹出框插件(v3.0)测试页面

源文件下载.zip 16.6k 一、内置弹框 显示最简单的内置的信息确定提示框:点击我 $("#test1").click(function(){ $.zxxbox.remind("你已成功受邀参加威尼斯电影节。"); }); 带回调函数的信息确...

mickelfeng ⋅ 2013/01/07 ⋅ 0

在iphone的Safari浏览器中一个小问题

Mr_William ⋅ 2016/08/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 23分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 25分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 29分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 33分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 34分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 34分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 35分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 41分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 44分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 49分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部