引导程序5:用javascript显示modal

Question

我正在用bootstrap 5制作一个整洁的库，我想知道如何在不使用"；数据bs"在我的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上被阻止了。目标：触发#galleryModel。

谢谢你的阅读，谢谢你的帮助！

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