模态对话框未显示 - PUG答案

【问题标题】：Modal Dialog not showing - PUG模态对话框未显示 - PUG
【发布时间】：2021-10-18 00:45:44
【问题描述】：

我目前正在开发一个简单的模态对话框，它应该在按下按钮时打开；认为我会使用引导示例 (https://getbootstrap.com/docs/5.0/components/modal/) 作为启动程序将是最好的快速获胜。

由于我使用 pug 作为视图引擎，我很快将 HTML 转换为 Pug 并进行了测试，但没有成功。

模态容器未显示/弹出。我的控制台中没有任何错误。 Bootstrap 运行良好。

哈巴狗代码：

include modules/head
// Button trigger modal
button.btn.btn-primary(type='button' data-bs-toggle='modal' data-bs-target='#exampleModal')
    | Launch demo modal
// Modal
#exampleModal.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true')
    .modal-dialog
        .modal-content
            .modal-header
                h5#exampleModalLabel.modal-title Modal title
                button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close')
            .modal-body
                | This is a test.
            .modal-footer
                button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close
                button.btn.btn-primary(type='button') Save changes

sdsadHead 包括 jquery 和 bootstrap (v4.4)。

有没有人知道为什么它不起作用？关于淡入淡出 css 设置的建议无济于事。

提前致谢。

【问题讨论】：

您已经验证 Boostrap 的 JS 和 CSS 都正确加载了吗？
好主意。 JS 无法正常工作。谢谢@Sean

标签： html node.js pug

【解决方案1】：

正如上面 Sean 所提出的，问题是 Bootstrap.js 文件加载不正确。

开发者失败。

【讨论】：