Bootstrap 5：使用 javascript 显示模式答案

【问题标题】：Bootstrap 5 : show modal with javascriptBootstrap 5：使用 javascript 显示模式
【发布时间】：2021-06-11 08:41:43
【问题描述】：

我正在使用 bootstrap 5 制作一个整洁的图库，我想知道如何在不使用 HTML 中的“data-bs-...”的情况下触发引导模式 strong>（避免重复这些数据属性 50 次）。

我设法为源代码获取了一个功能齐全的 javascript，但 .modal() 函数和 .show() 函数似乎不起作用。事情是这样的：

function gallery(_src) {
var fullPath = _src;
var fileName = fullPath.replace(/^.*[\\\/]/, '');
var newSrc = "./assets/img/" + fileName;
document.querySelector("div#galleryModal img").src = "./assets/img/" + fileName;

document.getElementById("galleryModal").show(); }

我在最后的 javascript 行上被阻止了。目标：触发#galleryModal。

感谢阅读，感谢帮助！

【问题讨论】：

标签： javascript function bootstrap-modal show bootstrap-5

【解决方案1】：

如果我们想用javascript操作我们需要Create a modal instance 检查下面的代码，你会发现更多信息https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

var galleryModal = new bootstrap.Modal(document.getElementById('galleryModal'), {
  keyboard: false
});


galleryModal.show();

【讨论】：

简单。有效的。非常感谢你！ :)
import { bootstrap } from "bootstrap" 给我带来了错误，因为没有从 "bootstrap" 导出引导类型。而是从“bootstrap”导入 { Modal }。