Bootstrap打开和关闭模态框API

1. import js

import { Modal } from 'bootstrap/dist/js/bootstrap'

2.调用API (模态框ID)

// 创建一个模态框实例
const myModal = new Modal(document.getElementById('myModal'));

// 显示模态框
myModal.show();

// 隐藏模态框
myModal.hide();

//设置定时关闭
setTimeout(function () {
  myModal.hide();
}, 1000)
### 如何使用 Bootstrap 控制模态框 (Modal) 的打开 要通过 JavaScript 或 HTML 数据属性来控制 Bootstrap 模态框打开,可以按照以下方法操作。 #### 使用数据属性自动触发模态框 可以通过设置 `data-bs-toggle` `data-bs-target` 属性,在按钮点击时自动打开指定的模态框[^4]: ```html <!-- 触发模态框的按钮 --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> 打开模态框 </button> <!-- 模态框结构 --> <div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">模态框标题</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> 这里是模态框的内容。 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> </div> </div> </div> </div> ``` 上述代码中,`data-bs-toggle="modal"` 表明该按钮用于触发模态框,而 `data-bs-target="#myModal"` 则指定了目标模态框的 ID。 --- #### 使用 JavaScript 动态控制模态框 如果希望通过 JavaScript 来动态控制模态框的显示,则可以利用 Bootstrap 提供的 Modal 插件 API。以下是具体示例代码[^3]: ```javascript // 获取模态框 DOM 对象 var myModal = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: true // 是否允许按下 ESC 键关闭模态框,默认为 true }); // 显示模态框 myModal.show(); // 关闭模态框 myModal.hide(); ``` 在此示例中,`new bootstrap.Modal()` 构造函数创建了一个新的模态框实例,并绑定了对应的 DOM 节点。调用 `.show()` 方法即可手动展示模态框,`.hide()` 方法则用于隐藏它。 --- #### 注意事项 为了确保模态框正常工作,需正确加载 Bootstrap 的 CSS JavaScript 文件。例如,可以在项目的 `<head>` 中引入以下链接][^[^34]: ```html <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> ``` 如果没有正确加载这些资源文件,模态框可能无法按预期渲染或运行。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值