当前位置: 开发笔记 > 前端 > 正文

实现lightBox时的样式与行为分离减少JS第1/2页

作者：幸福-一路向南_654 | 来源：互联网 | 2022-09-21 07:50

本教程旨在实现lightBox时的样式与行为分离，减少JS在各方面（全屏遮蔽、ie6中遮蔽select、双向居中、高度自适应内容等）的工作。

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3.5 / OP9.6 / SF4 / Chrome2 ]
[操作系统：Windows]
本教程旨在实现lightBox时的样式与行为分离，减少JS在各方面（全屏遮蔽、ie6中遮蔽select、双向居中、高度自适应内容等）的工作。
先上代码：

代码如下:

假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]

假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]
[br]
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]
[br]
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]

假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]

这个lightBox具备以下特性，大家可以通过修改代码测一测 ^-^：

在页面中任意一位置点开，均能完美遮屏（此时无法直接控制包括滚动条在内的任意元素），IE6中无须隐藏即能遮蔽select元素（iframe遮蔽法的缺陷：遮蔽后，如果拖动滚动条，select仍会移至顶层）。
lightBox的高度自适应其内容，并呈现完美的居中状态。
内容为单行时，居中显示；内容为多行时，居左显示；内容高度使lightBox超过屏高时呈现滚动条，并居顶显示，读者能完整阅读。
如有兴趣，构成这个lightBox的以下小技巧可供您参详：

1. 全屏遮蔽的方法：

A. 隐藏html/body的滚动条。
B. 用一个div做遮罩，再用一个div做带有滚动条的页面，一个叠上面，一个叠下面。

代码如下:

 
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br] 
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br] 
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br] 
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br] 
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br] 
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br] 
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br] 
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br] 
假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br]假装很丰富的内容[br] 

12下一页阅读全文

推荐阅读

firefox
深入理解：AJAX学习指南

本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用，旨在为初学者提供全面的学习资料。 ... [详细]

蜡笔小新 2024-11-20 17:58:54
js
使用Echarts for Weixin 小程序实现中国地图及区域点击事件

本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图，并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]

蜡笔小新 2024-11-18 19:37:06
js
项目风险管理策略与实践

本文探讨了项目风险管理的关键环节，包括风险管理规划、风险识别、风险分析（定性和定量）、风险应对策略规划及风险控制。旨在通过系统的方法提升项目成功率，减少不确定因素对项目的影响。 ... [详细]

蜡笔小新 2024-11-20 20:52:24
js
探索AI智能机器人自动盈利系统的构建

用户可通过支付198元押金及30元设备维护费租赁AI智能机器人，推荐他人加入可获得相应佣金。随着推荐人数的增加，用户将逐步解锁更高版本，享受更多收益。 ... [详细]

蜡笔小新 2024-11-20 19:37:48
js
深入解析SpringMVC中的HandlerMapping机制

本文将从基础概念入手，详细探讨SpringMVC框架中DispatcherServlet如何通过HandlerMapping进行请求分发，以及其背后的源码实现细节。 ... [详细]

蜡笔小新 2024-11-20 19:24:42
js
利用Windows EFS实现文件夹加密

Windows操作系统提供了Encrypting File System (EFS)作为内置的数据加密工具，特别适用于对NTFS分区上的文件和文件夹进行加密处理。本文将详细介绍如何使用EFS加密文件夹，以及加密过程中的注意事项。 ... [详细]

蜡笔小新 2024-11-20 18:57:46
scroll
Android应用开发案例分享：春节假期个人项目

回顾两年前春节期间的一个个人项目，该项目原本计划参加竞赛，但最终作为练习项目完成。独自完成了从编码到UI设计的全部工作，尽管代码量不大，但仍有一定的参考价值。本文将详细介绍该项目的背景、功能及技术实现。 ... [详细]

蜡笔小新 2024-11-20 18:42:22
js
如何在PHP中安装Xdebug扩展

本文介绍了如何从PECL下载并编译安装Xdebug扩展，以及如何配置PHP和PHPStorm以启用调试功能。 ... [详细]

蜡笔小新 2024-11-20 18:31:50
js
物理隔离环境下的数据交换平台挑战与解决方案（上）

本文探讨了在一个物理隔离的环境中构建数据交换平台所面临的挑战，包括但不限于数据加密、传输监控及确保文件交换的安全性和可靠性。同时，作者结合自身项目经验，分享了项目规划、实施过程中的关键决策及其背后的思考。 ... [详细]

蜡笔小新 2024-11-20 18:18:23
js
java写简易五子棋游戏。

importjava.io.*;importjava.util.*;publicclass五子棋游戏{staticintm1;staticintn1;staticfinalintS ... [详细]

蜡笔小新 2024-11-20 17:34:54
js
解决Visual Studio Code中PHP Intelephense误报问题

PHP作为一种高度灵活的编程语言，其代码结构可能导致Intelephense插件在某些情况下报告不必要的错误或警告。自1.3.3版本起，Intelephense引入了多个配置选项，允许用户根据具体的工作环境和编程风格调整这些诊断信息的显示。 ... [详细]

蜡笔小新 2024-11-20 16:47:16
js
心理学经典：《思考致富》

《思考致富》是由美国著名成功学大师拿破仑·希尔撰写的一部重要著作，该书基于希尔长达20年的深入研究和访谈，探讨了个人成功的核心要素。书中不仅揭示了成功的关键，还提供了一系列实用的方法和策略。 ... [详细]

蜡笔小新 2024-11-20 16:42:07
js
详解二进制与十六进制间的转换方法

本文将详细介绍如何在二进制和十六进制之间进行准确的转换，并提供实际的代码示例来帮助理解这一过程。 ... [详细]

蜡笔小新 2024-11-20 16:01:54
js
php的is_null+empty+isset+unset

empty,isset首先都会检查变量是否存在，然后对变量值进行检测。而is_null只是直接检查变量值，是否为null,因此如果变量未定义就会出现错误！检测一个变量是否是null ... [详细]

蜡笔小新 2024-11-20 15:41:48
webkit
Python3爬虫实战：突破网站反爬虫机制的方法

本文详细探讨了使用Python3编写爬虫时如何应对网站的反爬虫机制，通过实例讲解了如何模拟浏览器访问，帮助读者更好地理解和应用相关技术。 ... [详细]

蜡笔小新 2024-11-14 19:48:54

幸福-一路向南_654

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章