Bootstrap 5 : 使用 javascript 显示模态

Question

我正在用 bootstrap 5 制作一个整洁的画廊，我想知道如何 触发一个 bootstrap 模态在我的 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 行被屏蔽了。 objective : 触发#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();

Bootstrap 5 : 使用 javascript 显示模态

Bootstrap 5 : show modal with javascript

javascript

function

show

bootstrap-modal

bootstrap-5