Html 引导模式：类="；“模态衰减”；引起问题

我正在尝试在我的view.ejs文件中使用引导模式教程。但是

class=“modal fade”

似乎引起了一个问题。如果我删除class=“modal fade”，模态将永久显示，但如果我将其保留在代码中，当我单击按钮时，不会发生任何事情

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal"  role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

---

我是网络开发新手，可能遗漏了一些小东西，请帮助我

您可能做错了什么，创建您自己的小提琴并在这里分享。！ 我使用了你的代码，它工作得很好！我刚刚添加了模态类和淡入淡出类，它只有在我点击按钮时才会打开

开放模式
&时代；
模态头
模态中的一些文本

接近

不确定是否有人会读到这篇文章，但我们有一些用户（不是所有用户）遇到了这个问题

原来它与css有关，当您在操作系统级别关闭窗口动画时，css会激活：

@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } @媒体（首选简化运动：简化）{ .modal.fade.modal对话框{ 过渡：无； } } 将其从引导中删除，可以使modals与“fade”类一起工作，以供遇到问题的用户使用

有关媒体查询的更多信息，请点击此处：

---

显然，删除查询对于那些打开了简化运动的人来说并不理想。

你是在代码中加载

Jquery

文件吗？如果我理解正确，它对nodejs是自动的？你是加载引导JS代码还是只加载CSS？你需要JS才能让它工作。

fade

类添加到一个

click

jQuery事件中，该事件将淡出模式。如果您不使用JS来确保其工作，请将此用作测试：

一旦您对其满意，然后下载JS并在本地加载。我也有同样的问题，我可能只是删除淡入淡出，但这是一个非常难看的设计谢谢您的努力。我不认为用小提琴就能说明发生了什么。因为我们使用的是角度、帆等，所以认为这个问题不仅仅与代码有关？你有没有找到解决这个问题的方法？我现在也有同样的问题。

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>

            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } }