js css 实现遮罩层覆盖其他页面元素附图_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

js css 实现遮罩层覆盖其他页面元素附图_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:35 PM

覆盖遮罩层

<div style=" position: fixed; width: 100%; height: 100%; 
left: 0px; top: 0px; background-color: Black; z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;"></div>

登录后复制

z-index 必须大于遮罩元素

demo

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<style type="text/css"> 
ul, ul ul { 
list-style-type:none; 
margin: 0; 
padding: 0; 
width: 15em; 
} 

ul a { 
display: block; 
text-decoration: none; 
} 

ul li { 
margin-top: 1px; 
} 

ul li a { 
background: #333; 
color: #fff; 
padding: 0.5em; 
} 

ul li a:hover { 
background: #000; 
} 

ul li ul li a { 
background: #ccc; 
color: #000; 
padding-left: 20px; 
} 

ul li ul li a:hover,ul li ul .current a { 
background: #aaa; 
border-left: 5px #000 solid; 
padding-left: 15px; 
} 

</style> 
</head> 

<body> 
<div id="bb" style="background-color: red;display:none;z-index: 99999; max-height:79.3%; position: fixed; filter: alpha(opacity=70); Opacity:0.7; top: 10px; left:5px;"> 
<ul> 
<li> 
<a href="">老大</a> 
<ul> 
<li> 
<a href="javascript:alert('you can do you want');">老大大</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大二</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大三</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大四</a> 
<li> 
</ul> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老二</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老三</a> 
<li> 
<li> 
<a href="">老四</a> 
<ul > 
<li><a href="javascript:alert('you can do you want');">老一</a><li> 
</ul> 
<li> 
</ul> 
</div> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 

<br> 
<br><br><br> 
<br> 
<br> 
<button id="aa">哈哈</button> 
<div id="zz" style="display:none;position: fixed; width: 100%; height: 100%; 
left: 0px; top: 0px; background-color: Black; z-index: 1999; filter: alpha(opacity=70); Opacity:0.7;"></div> 
</body> 
<script type="text/javascript"> 
$(function(){ 
$("#aa").click(function(){ 
$("#zz").show(); 
$("#bb").show(); 
$("#bb").animate({left:'100px'}); 
$("#bb").animate({left:'0px'}); 
}); 
$("#zz").click(function(){ 
$("#bb").animate({left:'-240px'}); 
$("#zz").hide(); 
}); 
$('#bb ul li ul').hide(); 
$("#bb ul li a").click(function(){ 
var a= $(this); 
var nextobj=a.next(); 
if(nextobj.is("ul")){ 
$('#bb ul li ul:visible').slideUp('normal'); 
if(!nextobj.is(':visible')){ 
nextobj.slideDown('normal'); 
} 
return false; 
} 
}); 
}); 
</script> 
</html>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7392

Java教程

1630

CakePHP 教程

1357

Laravel 教程

1268

PHP教程

1216

显示更多

Related knowledge

CentOS覆盖安装及CentOS7覆盖安装 Feb 29, 2024 pm 10:00 PM

本文目录导读：CentOS覆盖安装CentOS7覆盖安装为您分享在CentOS操作系统中，经常需要执行覆盖安装来解决系统问题或进行更新。本文将详细介绍CentOS的覆盖安装和CentOS7的覆盖安装步骤，助您有效管理和维护系统。CentOS覆盖安装在系统已经安装的情况下进行CentOS的覆盖安装通常是为了修复系统问题或进行更新。在执行此操作之前，请务必备份重要数据，以免遗失。1.下载最新的CentOS镜像文件，并制作启动U盘或光盘。2.将启动U盘或光盘插入计算机，重启计算机并进入BIOS设置，将

PHP函数是否支持函数重载和函数覆盖？ Apr 19, 2024 am 10:06 AM

PHP语言不支持函数重载和函数覆盖，原因是函数重载可能导致二义性。替代方案：使用命名空间隔离函数。设置参数缺省值。使用可变函数参数。

Java错误：方法覆盖错误，如何解决 Jun 24, 2023 pm 11:09 PM

Java作为一种流行的编程语言，经常被用于开发各种类型的应用程序。然而，在Java中经常会遇到许多常见的错误和异常，最常见的错误之一是“方法覆盖错误”。本文将介绍此错误的原因，并提供一些解决方法以避免此类错误。方法覆盖的定义在Java中，方法覆盖是指在子类中重写父类的已定义方法的过程。当子类方法具有与父类方法相同的名称，参数列表和返回类型时，我们称它们为具有

C++ 函数的重载和覆盖 Apr 12, 2024 pm 12:12 PM

C++中重载和覆盖是不同的概念。重载允许创建同名函数，具有不同的参数列表，而覆盖允许派生类函数覆盖基类同名函数。在重载中，函数名相同，但参数列表不同，在覆盖中，函数名和参数列表必须相同，并且派生类函数必须使用override关键字。

比亚迪方程豹覆盖全国62城，门店数已达120家 Dec 17, 2023 pm 05:59 PM

12月17日消息，比亚迪方程豹宣布在12月1日至17日期间，已在全国新增了20家直营新店，遍布7个城市。这一扩张将比亚迪方程豹的门店总数提升至全国62个城市，共计120家门店。据小编了解，比亚迪方程豹最初推出的首款车型，即豹5，在11月23日开始了全国首批车主的交付工作。具体的交付流程根据不同的车型如下：2023年12月1日起，我们将陆续开始交付探索版和风暴米内饰版本的车型从2023年12月7日开始，20寸轮毂版本和雪域白外观版本的车型将陆续交付从2023年12月15日起，计划陆续交付山脉绿外观

在Java中，我们可以覆盖（override）start()方法吗？ Aug 20, 2023 pm 06:17 PM

是的，我们可以覆盖Java中Thread类的start()方法。我们必须调用super.start()方法来创建一个新的线程，并且需要在新创建的线程中调用run()方法。如果我们直接从start()方法中调用run()方法，它将在实际线程中作为普通方法执行，而不是在新线程中执行。示例publicclassThreadTest{ publicstaticvoidmain(String[]args){ &

在Java中覆盖时，父子层次结构对于抛出异常重要吗？ Aug 19, 2023 pm 01:49 PM

当您尝试处理由特定方法抛出的（已检查的）异常时，您需要使用Exception类或发生异常的超类来捕获它。同样，在重写超类的方法时，如果它抛出异常−子类中的方法应该抛出相同的异常或其子类型。子类中的方法不应该抛出其超类型。您可以在不抛出任何异常的情况下进行重写。当您有三个名为Demo，SuperTest和Super的类（层次结构）继承时，如果Demo和SuperTest有一个名为sample()的方法。示例实时演示classDemo{ &a

我们能在Java中覆盖一个受保护的方法吗？ Aug 28, 2023 pm 03:25 PM

是，超类的受保护方法可以被子类覆盖。如果超类方法受保护，则子类重写方法可以具有受保护或公共（但不能具有默认或私有）)这意味着子类重写的方法不能有较弱的访问说明符。示例classA{ protected voidprotectedMethod(){ System.out.println("superclassprotectedmethod"); &

See all articles

js css 实现遮罩层覆盖其他页面元素附图_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题