引导程序 5：使用 javascript 显示模态

Question

我正在用bootstrap 5制作一个整洁的画廊，我想知道如何在我的 HTML 中不使用“data-bs-...”的情况下触发引导模式（以避免将这些数据属性复制 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。

感谢阅读，感谢帮助！

Answer 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();