当前位置：网站首页 > IT知识 > 正文

Bootstrap 模态框(Modal)插件的使用

liuian 2024-12-11 15:44 74 浏览

Bootstrap模态框（modal）不知道谁起的名字，反正就这么回事。经常使用在网站的登陆/注册按钮，弹出模态框，来提醒用户输入的同时，网站有一个遮罩层来屏蔽其他的操作。

一、使用方法：1、通过自定义 data 属性来调用；

2、使用js来调用，一般不用此方法；

$('#comeback').modal(options) 通过 JavaScript 来调用带有 id="comeback" 的模态框。

二、模态框在HTML的位置：

可以在任何位置，它主要是使用id来调用的。

三、用data属性来调用模态框，在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#mymodal" 或 href="#mymodal" 来指定要切换的特定的模态框（带有 id="mymodal"）。

data-toggle=“modal” 告诉bootstrap 调用的是模态框；
data-target =“#mymodal” 告诉bootstrap 调用的是模态框的ID为mymodal！
第一个div的class ：.modal 说明这个div为模态框属性；
第二个class属性为fade 。是应用一些淡入淡出的效果；
aria-labelledby="myModalLabel"，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
完成后，大概就是下图这个鬼样子：

你可以自己往上面添加一些内容，让他看起来更漂亮。

bootstrap label

上一篇：如何创建自己的 Google Chrome 扩展程序
下一篇：React-注册功能服务端使用Nodejs+MySQL

相关推荐

系统之家ghost xp sp3（系统之家的系统可靠吗）: 进入PE系统，备份所有您要的数据，之后重新给硬盘分区，格式化所有硬盘，再安装系统。你有U盘版的PE吗(就是微型XP)？如有就方便了，插入U盘》选择U盘启动》选择启动PE》进入PE系统后选择格式化你硬...

ios虚拟云手机（虚拟云手机免费ios）: 一、效用功能一键宏功能：也是最重要的一点，200台手机秒开、秒玩，秒用，同步状态下不限操作，画面一致。云扫码：几乎算得上是独有的真机功能，本地上传二维码，扫描安装app等。云语音：云社交必备功能，游戏...

apk文件怎么打开安装（apk文件怎么打开安装手机）

win7怎么调节亮度（win7怎么调整亮度调节）: win7系统可以通过以下步骤调节屏幕亮度：1.打开开始菜单，选择控制面板选项。2.在弹出的控制面板中，选择点击“系统和安全”选项。3.在弹出的系统和安全界面中，继续点击“电源选项”。4.在界...

手机百度最新版本下载（手机百度8.0版本官方下载）: 手机安装包删除后可以通过最近删除进行恢复。以手机华为p40为例，恢复删除的安装包的步骤分为3步，具体操作如下：1.在手机文件管理界面中，点击最近删除。2.在最近删除界面中，长按需要恢复的安装包。3.在展开的选项中，点击还原即可。1、首先在电...; 2025-12-21 17:05 liuian

win7怎么打开电脑摄像头（win7如何开启电脑摄像头的功能）: 在Win7系统中，开启摄像头的方法有以下几种：1.通过“计算机”管理器打开：a.点击“开始”菜单，选择“计算机”图标。b.右键点击“计算机”，选择“管理”。c.在“计算机管理”窗口的左侧栏...

什么是网卡（什么是网卡驱动程序）: 你好，网卡是计算机网络中的一种硬件设备，也称作网络适配器，主要作用是将计算机数据转换为网络可识别的信号，同时将网络数据转换为计算机可识别的信号。在计算机和网络之间进行数据传输时，网卡起到了十分重要的作...

win7版本有几个（win7目前有几个版本 a 3 b 4 c 5 d 6）: Windows7包含6个版本。这6个版本分别是:1.Windows7starter（初级版）这是功能最少的版本，主要用于类似上网本的低端计算机。2.Windows7homebasic...

办公管理系统（办公管理系统有哪些）: OA是OfficeAutomation的简写，就是办公自动化。所谓OA系统就是用网络和OA软件构建的一个单位内部的办公通信平台，用于辅助办公。OA系统完成单位内部的邮件通信、信息发布、文档管理、工作...

cad2013序列号（cad2002序列号）: 很抱歉，我无法提供您所需要的CAD软件序列号密钥。这涉及到软件盗版和侵权问题，而且使用未授权的序列号是违法行为，请您尊重和支持正版软件。如果您需要使用CAD软件，可以前往Autodesk官方网站购买正...

苹果手机系统重装（苹果手机系统重装后需要登陆账号吗）: 为了直观一些，我就用一台美版的卡贴7代128G做演示！1，电脑下载爱思助手，将手机和电脑用数据线连接，注意数据线推荐用原装的，至少不能用几块钱的垃圾！然后打开爱思助手，如图2，点导航栏里面的刷机越狱，在弹出的窗口选择一键刷机，如下图，软件会...; 2025-12-21 13:55 liuian

win10账户密码忘记了（win10账户密码忘记了进不去桌面了）: 如果您忘记了Windows10账户的密码，可以尝试以下方法来恢复或重置密码：1.使用Microsoft账户重置密码：如果您使用的是Microsoft账户登录Windows10，则可...

win7电脑系统恢复（win7 恢复）

极速重装系统（极速重装系统安全吗）: 1如果手机系统低无法安装巅峰极速，可以尝试升级手机系统或者寻找其他适配的版本。2低版本的手机系统可能不具备巅峰极速所需的硬件和软件要求，因此无法安装。升级手机系统可以获得更好的兼容性和性能，从而解...

电脑蓝屏怎么解决0x000000ed: 电脑出现蓝屏，代码0X000000ED，首先可以尝试重启电脑，按F8进入安全模式，在安全模式下运行CMD命令窗口，之后在命令提示符下输入"chkdsk/f/r"按回车,然后按y，下次重新启动电脑时，操作系统会自动修复硬盘;如果安全模式...; 2025-12-21 11:55 liuian

一周热门

最近发表

首页
收录
顶部