Foundation 模态框2

简介: 模态框大小可通过添加不同类名调整,如 .tiny(30%宽)、.small(40%宽)等。默认情况下,模态框在大屏设备上为80%宽度,小屏设备则为100%。支持内嵌模态框,需设置唯一id,且可设置多个模态框同时开启。

模态框大小
可以在模态框容器上添加以下类来设置模态框的大小:

.tiny: 30% 宽度
.small: 40% 宽度
.medium: 60% 宽度
.large: 70% 宽度
.xlarge: 95% 宽度
.full: 100% 宽度和高度
注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度,在小屏幕设备上是 100% 宽度。

实例


尝试一下 »
内嵌模态框
你可以在模态框内嵌入模态框,可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id:

实例

Click To Open Modal



First Modal


Some text..


Open Second Modal


×


Tada! Second Modal


Some text..


×

尝试一下 »
第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时,不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性:

实例

相关文章
|
机器学习/深度学习 SQL 算法
命令行上的数据科学第二版:十一、总结
命令行上的数据科学第二版:十一、总结
115 0
|
7月前
|
安全 Unix Linux
Veritas NetBackup 11 for Linux & Windows - 领先的企业备份和恢复解决方案
Veritas NetBackup 11 for Linux & Windows - 领先的企业备份和恢复解决方案
183 0
Veritas NetBackup 11 for Linux & Windows - 领先的企业备份和恢复解决方案
|
机器学习/深度学习 编解码 PyTorch
CVPR 2023 | 主干网络FasterNet 核心解读 代码分析
本文分享来自CVPR 2023的论文,提出了一种快速的主干网络,名为FasterNet。核心算子是PConv,partial convolution,部分卷积,通过减少冗余计算和内存访问来更有效地提取空间特征。
9745 58
|
自然语言处理 IDE 开发工具
通义灵码编程智能体上线,支持Qwen3模型
通义灵码最全使用指南,一键收藏。
129044 31
通义灵码编程智能体上线,支持Qwen3模型
|
监控 数据挖掘 Linux
Linux服务器PBS任务队列作业提交脚本的使用方法
【8月更文挑战第21天】在Linux服务器环境中,PBS任务队列能高效管理及调度计算任务。首先需理解基本概念:作业是在服务器上执行的任务;队列则是等待执行任务的列表,具有不同的资源限制与优先级;节点指分配给作业的计算资源。
1896 4
|
数据采集 数据挖掘 数据处理
如何在Pandas中将索引(index)转换为数据列
如何在Pandas中将索引(index)转换为数据列
948 0
|
前端开发 JavaScript 编译器
sass 混入 (@mixin 与 @include的使用)
sass 混入 (@mixin 与 @include的使用)
604 0
|
Python
|
人工智能 分布式计算 IDE
未来编程语言的演进趋势:多范式融合的新时代
本文探讨了编程语言发展的未来趋势,特别是多范式融合对软件开发的影响。在技术迅速发展的今天,编程语言不再局限于单一范式,而是向着功能性、面向对象、命令式等多种范式的融合发展。这种融合不仅提高了编程的灵活性和表达力,还促进了新技术的应用,如云计算、大数据处理和人工智能。文章通过分析现有编程语言的发展状态,预测了未来编程语言的几个关键特征,并讨论了这些变化对开发者和行业的潜在影响。
353 0
|
SQL 前端开发 JavaScript
jquery链接sql数据库
直接使用jQuery来链接SQL数据库是不安全且不可行的。jQuery是一个前端JavaScript库,主要用于操作HTML文档、处理事件、执行动画等。出于安全原因,前端代码(包括JavaScript