禁用除 DIV 元素之外的所有内容

2024-03-20

我在 div 元素中有一个视频播放器。我想禁用除 DIV 之外的所有内容。一种方法是使用 lightbox,但我想知道是否可以使用纯 HTML/Javascript 来实现。


我给你做了一个简单的例子,

jQuery ;

        $(".disable").on('click', function(){
           // * = select All, find Div, Not (#video) and edit css opacity
            $("*").find('div').not("#video").css('opacity', '0.1');

        });

HTML ;

   <button class="disable">Disable</button>    
    <div class="header">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum     has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

<div id="video">
   <img src="http://fandomania.com/wp-content/uploads/2012/04/06/anarchy01.jpg">
 </div>

<div class="footer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Css ;

.header{border:1px solid #000;background:#cc0000;color:#fff;}
.footer{border:1px solid #000;background:#cc0000;color:#fff;}

Check FIDDLE http://jsfiddle.net/mehmetakifalp/94gmW/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

禁用除 DIV 元素之外的所有内容 的相关文章

随机推荐

  • SOA(商业智能和面向服务的架构)中的报告

    我的 SOA 包含员工服务和旅行服务 旅行服务将在 Travel 数据库中为employeeId 创建一个travelID 条目 员工将使用 TravelUI 网站 该网站调用旅行服务将详细信息存储在数据库中 来请求旅行 有一个 Manag
  • Node.js + Google App Engine 提供的静态内容

    Google Cloud 文档对于可用语法不是很精确app yaml文件用于我的Node js应用 我使用了中描述的语法GAE 的 Python 文档 https cloud google com appengine docs python
  • Spree 变体选项值的下拉框

    我正在学习 Spree 3 0 并且我建立了一个销售短裤的测试商店 短裤有多种选择类型 尺码 颜色 长度 我想改变它在前端显示变体选项的方式 从单选复选框更改为下拉框 目前 Spree 将选项类型显示为单选按钮 我想更改为对每个选项类型使用
  • 错误:选择不包含主要类型

    我正在尝试在新项目中运行一些java文件 所以我制作了项目 将文件放入其中 然后尝试运行主文件 以便我的游戏开始 我收到一条错误消息selection does not contain a main type 我尝试了几种方法来运行它 有人
  • BigQuery,使用线性插值填充缺失值

    我在 Bigquery 中有一个表 每 30 分钟显示一次数据 我想每 5 分钟显示一次数据 目前我正在使用此查询用现有值填充空值 SELECT SETTLEMENTDATE DUID LAST VALUE SCADAVALUE ignor
  • 保留原始权重的加权双峰二分图投影

    我有一个大的 36k 个顶点 50k 个边 加权双峰二分图 我想生成一个投影 它不仅像默认加权实现一样计算邻居数量 而且还对边上的权重求和 您可以将其视为包含黑色顶点和蓝色顶点的二部图 当只有蓝色顶点时 我想保留原始图的权重 我遇到的实现保
  • Rails_admin:我应该有 admin_user 或具有管理员角色的用户来管理用户和管理面板

    在我的 Rails 应用程序网站中 访问者可以注册并创建内容 它使用带有用户模型的设计 一切正常 现在我想使用rails admin 来管理网站资源和用户等 并且只有具有管理特权的人才能访问它 我应该为管理面板访问创建一个单独的 Admin
  • 将 Json 中的数据解析为 Picasso 的图像集合

    我尝试解析图像集合recyclerview as gridview using Picasso图书馆 但我无法让它工作 注意 我没有任何错误 但不工作 这是 Json 数据a link https itunes apple com jo r
  • 如何为容器拥有不同的webapp资源:SBT中的启动和打包任务

    我有一个带有纯 JS 前端和 Scala 后端的 Web 应用程序 我想在我的构建管道中使用 Grunt 来处理src main web应用程序进入目标分布 网络应用程序我还想保留原始的 JS 和 HTML 文件以使用容器进行本地测试 启动
  • 在简单但大的数据库中对小集合进行 mongoDB 查询速度慢得离谱

    所以我在 mongoDB 中有一个超级简单的数据库 其中有一些集合 gt show collections Aggregates lt count 92 Users lt count 68222 Pages lt count 1728288
  • 使用ServletFileUpload的parseRequest进行文件上传? [复制]

    这个问题在这里已经有答案了 我上传我浏览的文件input type file 在我的网络应用程序中 问题是我得到了FileItem列表大小为 0 尽管我可以在下面看到所有上传的文件信息 request gt JakartaMutltiPar
  • 如何在本地调试 Azure Function QueueTrigger

    我正在开发一个天蓝色函数 它将由天蓝色存储队列触发 对于 HTTPTrigger 我们可以在本地进行调试 但我无法找到在本地调试 QueueTrigger 的方法 你们中的任何人都可以告诉我如何使用 QUEUETRIGGER 在本地框运行功
  • 如何在 JSF 2.0 中创建自定义 404 消息?

    目前在我的应用程序中 当用户在地址栏中键入一些非法目的地时 会看到以下内容 我想让它变得更漂亮 并使用我自己的标记和一些 CSS 对其进行自定义 我需要在我的应用程序上进行编程还是必须在应用程序服务器中进行配置 如果我想这样做 我应该从哪里
  • 何时使用 OrderByCompletion (Jon Skeet) 与 Parallel.ForEach 与异步委托

    最近 伦敦 NDC 的 Jon Skeet 谈到了 C 5 async await 并提出了 按完成顺序排序 异步任务列表 链接http msmvps com blogs jon skeet archive 2012 01 16 eduas
  • Django Celery 应用程序 - 没有名为 celery 的模块错误

    我创建了一个 django celery 应用程序 如教程中所示 http docs celeryproject org en master django first steps with django html http docs cel
  • 从 OpenCV 代码到 FPGA 代码的转换是否比 Matlab 代码更容易? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想做一个关于图像处理的项目 我想知道如果我想在FPGA上实现这个项目 我应该在第一阶段选择Matla
  • 从文本文件中读取变量

    我正在尝试创建一个密码提示 它将用户输入与文本文件中的信息进行比较 密码保存在 txt 文件中 我尝试使用通过命令提示符和该网站提供给我的信息 但我无法让它工作 可能是因为我没有足够的经验 因为我对高级批量编码相当陌生 这是我到目前为止所想
  • 规格用于 JUnit XML 输出 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 在哪里可以找到 JUnit 的 XML 输出规范 我的目标是编写一个 UnitTest XML 报告器
  • 使 getContentResolver() 在扩展 Fragment 类的类中工作

    我想要的是使用两个片段 第一个片段显示联系人列表 第二个片段显示上方片段中选择的联系人的详细信息 我用来扩展的类Fragment类不允许我使用getContentResolver 由于上下文问题而导致的方法 现在 我尝试获取扩展 Fragm
  • 禁用除 DIV 元素之外的所有内容

    我在 div 元素中有一个视频播放器 我想禁用除 DIV 之外的所有内容 一种方法是使用 lightbox 但我想知道是否可以使用纯 HTML Javascript 来实现 我给你做了一个简单的例子 jQuery disable on cl