引导模式：class =“modal fade”导致问题

Question

我正在尝试让引导模式教程在我的 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 文件中搜索淡入淡出，但找不到任何内容。还尝试在上面的代码之前添加此内容，但没有帮助：

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0); // IE9 only
    transform: translate(0, 0);
}

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

Answer 1

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

事实证明它与此 css 有关，当您在操作系统级别关闭窗口动画时，它会激活：

    @media（首选减少运动：减少）{
        .modal.fade .modal-dialog {
            过渡：无；
        }
    }

从引导程序中删除它，可以使模态与遇到问题的用户的“淡出”类一起使用。

有关媒体查询的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

显然，删除查询对于开启减少运动的人来说并不理想。

Answer 2

如果我单击模态的 btn，然后打开淡入淡出屏幕，并且模态位于淡入淡出屏幕下方，因此不清晰可见。

Answer 3

您可能做错了什么，创建您自己的小提琴并在此处分享。！ 我使用了你的代码，它工作正常！我刚刚向其中添加了模态和淡入淡出类，并且仅当我单击按钮时它才会打开

https://jsfiddle.net/happy2deepak/e5aukzge/

<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>