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

Question

我正在用bootstrap 5制作一个整洁的图库，我想知道如何在不使用“data-bs-...”的情况下触发一个bootstrap模式。在我的HTML中（以避免重复这些数据属性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操作，我们需要创建一个模态实例检查下面的代码，您可以找到更多信息https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

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


galleryModal.show();