10 个强大的响应式 LightBox 对话框

最新推荐文章于 2021-07-17 20:24:46 发布
最新推荐文章于 2021-07-17 20:24:46 发布
阅读量1.2k 收藏
点赞数
分类专栏： IOS 文章标签： lightbox.js iOS
笔记 同时被 2 个专栏收录
66 篇文章 0 订阅
订阅专栏
IOS
20 篇文章 0 订阅
订阅专栏

Lightbox 一般用来在页面上弹出的方式显示图片而无需刷新网页，现在大量的响应式网站，Lightbox 也跟着要实现响应式设计。本文向你推荐 10 个强大的响应式 Lightbox 插件：

Visual LightBox

 

CSS Modal
使用纯 CSS 构造，支持跨浏览器，自适应媒体支持，小而快。

 

Magnific Popup
Magnific Popup 是一个免费的 jQuery lightbox 插件，侧重于性能和任意设备上的最佳体验，兼容 Zepto.js

 

FancyBox
FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

 

iLightbox

 

Fresco
Fresco 是一个漂亮的响应式的 lightbox，可用于创建令人惊叹的、支持各种屏幕尺寸的弹出层。

 

Chocolat

 

Shadowbox JS

 

rlightbox2

 

Responsive Lightbox

只支持图片的展示

via queness

要不要换个网名
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5响应式模态框(模态对话框).zip
05-28
HTML5响应式模态框(模态对话框)，响应式设计，自适应分辨率，兼容PC端和移动端，点击按钮弹出模态框动画效果，有关闭按钮。
推荐15款响应式的 jQuery Lightbox 插件
weixin_34195546的博客
03-25 140
　　利用现代 Web 技术，网络变得越来越轻巧与。模态框是突出展现内容的重要形式，能够让用户聚焦到重要的内容上去。在这个列表中，我们编制了15款响应式的 jQuery 灯箱库，这将有助于开发人员创建和设计美观的网站。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & Jav...
jquery.ilightbox:jQuery Lightbox是流行的lightbox脚本的简单移植
05-17
的jquery-iLightbox 0.1 jQuery Lightbox是流行的lightbox脚本的简单移植。 _ <a>演示页 用法 样式： 在您的html页面中包含jquery.lightbox css文件。 < link href =" jquery.lightbox.css " type =" text/css " rel =" stylesheet " /> Javascript： 在您的html页面中包括jQuery库和jquery.iLightbox脚本文件。 < script src =" http://code.jquery.com/jquery-latest.min.js " > </ script > < script src =" jquery.lightbox.min.js " > </ script > 创建其
html 响应式弹层插件,纯js响应式模态窗口和弹出层插件MODALit
weixin_31349405的博客
07-17 212
MODALit是一款纯js响应式模态窗口和弹出层插件。MODALit可以用于制作lightbox，模态窗口，对话框和弹出层等。MODALit插件的特点还有：支持6种动画过渡效果：zoom, flip, slide left/right/down/up。支持3种尺寸的对话框：small, large 和 full。支持图片和视频，视频格式包括：Youtube/Dailymotion/Vimeo/mp...
12款响应式 Lightbox（灯箱）效果插件
weixin_30823833的博客
09-09 139
　　灯箱效果（Lightbox）是网站中最常用的效果之一，用于实现类似模态对话框的效果。网络上各种 Lightbox 插件琳琅满目，随着响应式设计（Respnsive Design）的发展，这一先进理念也被引入了 Lightbox 插件之中。 　　这篇文章挑选了12款优秀的响应式 Lightbox（灯箱）效果插件分享给大家，这些插件能够帮助你在网站加入引人注目的灯箱效果。 　　1.JackBox ...
【前端】Magnific Popup – 响应式 jQuery Lightbox 插件
热门推荐
学习永不晚
03-06 1万+
原文地址：http://www.uedsc.com/magnific-popup.html 一、Magnific Popup可以做什么 1、单个图像lightbox 三个不同的缩放设置简单的弹出窗口。 1、适合水平和垂直， 2、只能水平， 3、没有差距，缩放动画关闭中右上角的图标。 2、灯箱画廊 你可以把任何 HTML 内容中每个库项目和混合的内容类型。在此示例中为基于移动方向
纯js响应式模态窗口和弹出层插件MODALit
12-11
MODALit是一款高效且实用的纯JavaScript响应式模态窗口和弹出层插件，其设计目标是为开发者提供一个轻量级、易用的解决方案，以创建lightbox效果、模态窗口、对话框以及各种弹出层。这款插件无需依赖jQuery库，但在...
glightbox:具有移动支持的纯Javascript灯箱。 它可以处理图像，具有自动播放功能的视频，内联内容和iframe
04-27
灯箱 GLightbox是一个纯JavaScript灯箱。 它可以显示图像，iframe，内联内容和视频，并具有针对YouTube，Vimeo甚至自托管视频的可选自动播放功能。 特征 小-压缩后只有11KB 快速响应-适用于任何屏幕尺寸 画廊支持-创建多个画廊 视频支持-具有自动播放功能的Youtube，Vimeo和自托管视频 内联内容支持-显示任何内联内容 iframe支持-是否需要嵌入iframe？ 没问题 键盘导航-ESC，箭头键，Tab键和Enter键是您所需要的 触摸导航-移动触摸事件 可缩放的图像-在移动和桌面上缩放和拖动图像 API-使用提供的方法控制灯箱 主题化-创建您的皮肤或通过一些小CSS更改来修改动画 现场演示 您可以在查看现场演示 用法 $ npm install glightbox # OR $ yarn add glightbox # OR $ bower i
支持移动手机的纯js lightbox插件GLightbox
12-10
GLightbox是一款支持移动手机的纯js lightbox插件。GLightbox可以支持图片，视频，内联内容和iframes等，非常强大。
前端项目-ekko-lightbox.zip
09-03
2. **响应式设计**：由于基于Bootstrap，Ekko Lightbox 自然继承了其响应式特性，能够在不同设备和屏幕尺寸上自适应显示，确保在手机、平板电脑和桌面设备上的良好视觉效果。 3. **键盘导航**：用户可以通过键盘的...
lightbox. 好用的网页图片效果
11-11
2. **响应式设计**：为了适应不同设备和屏幕尺寸，Lightbox需要具备响应式设计，确保在手机、平板和桌面电脑上都能良好工作。 3. **图片懒加载**：考虑到大图可能会增加网页加载时间，Lightbox往往采用懒加载技术，...
bootstrapw3lightbox简洁博客个人主页web简历简历.rar
最新发布
09-12
Bootstrap是Twitter推出的一个开源的用于前端开发的工具集，它提供了一套响应式布局、移动设备优先的WEB开发框架，帮助开发者快速构建美观且适应各种屏幕尺寸的网页。W3Lightbox则是一个轻量级的图片灯箱插件，用于...
前端项目-angular-bootstrap-lightbox.zip
09-03
而Bootstrap则是Twitter推出的一款开源前端框架，用于快速构建响应式和移动优先的网页。 本项目“angular-bootstrap-lightbox”是将这两者结合的产物，旨在为AngularJS应用提供一个轻量级、易于使用的Lightbox组件...
令人印象深刻的 jQuery 模态框插件 – iLightBox
weixin_34174422的博客
02-26 65
　　模态框能够把用户的注意力吸引到内容上，网络上有很多实现这样功能的插件。 iLightBox 是一个新的替代 jQuery 灯箱效果的插件，它可以显示图像，视频（YouTube，VIimeo，HTML5 视频等）以及其它的 HTML 内容，有一个可选的全屏模式。 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 精心挑选的优秀jQuery Ajax分页插件和...
响应式前端框架Bootstrap系列（16）模态框（Modal）插件
@黄小泽的个人博客
01-15 2534
模态框是bs框架的插件之一，之所以称为插件，是因为它有这自己的一套API，可以通过API提供的接口实现对模态框的控制。只要 是bs框架插件，都支持以下几个共同的属性： data-toggle属性：表示点击或链接时触发的事件。 data-target属性：表示点击或链接时触发的事件后将要被显示或隐藏的目标元素。 data-dismiss：是bootstrap里自定义的属性，给一个元素data-
Gantt的lightbox.sections保存
05-24
Gantt 的 `lightbox.sections` 属性用于定义在任务弹窗中显示的不同部分。该属性的值是一个数组，每个元素都是一个对象，用于定义一个部分。 以下是一个示例： ```javascript gantt.config.lightbox.sections = [ {name: "description", height: 70, map_to: "text", type: "textarea", focus: true}, {name: "time", type: "duration", map_to: "auto"} ]; ``` 上面的示例中，定义了两个部分，一个是任务描述部分，另一个是时间部分。其中，`name` 属性定义了部分的名称，`height` 属性定义了部分的高度，`map_to` 属性定义了将哪个数据字段映射到当前部分，`type` 属性定义了当前部分的类型，`focus` 属性定义了是否在打开弹窗时将焦点放在当前部分中。 如果你想要保存 `lightbox.sections` 属性的值，你可以使用 `gantt.config.lightbox.sections` 属性进行保存。例如，你可以在 `onLoad` 事件中将其保存到本地存储中： ```javascript gantt.attachEvent("onLoad", function(){ var sections = gantt.config.lightbox.sections; localStorage.setItem("gantt_sections", JSON.stringify(sections)); }); ``` 在下一次加载 Gantt 图表时，你可以从本地存储中获取 `lightbox.sections` 属性的值，并将其设置为 `gantt.config.lightbox.sections` 的值： ```javascript gantt.attachEvent("onLoad", function(){ var sections = localStorage.getItem("gantt_sections"); if (sections){ gantt.config.lightbox.sections = JSON.parse(sections); } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值