我正在尝试让 Bootstrap 模式教程在我的 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">×</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);
}
我是网络开发的新手,可能遗漏了一些小东西,请帮助我
最佳答案
不确定是否有人会读到这篇文章,但我们遇到了一些用户(不是所有用户)的问题。
原来它与这个 css 有关,当你在操作系统级别关闭窗口动画时它会激活:
@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } }
从 bootstrap 中删除它使得模式与遇到问题的用户的“淡入淡出”类一起工作。
更多关于媒体查询的信息:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
显然,删除查询对于开启减少运动的人来说并不理想。
关于html - Bootstrap 模式 : class ="modal fade" causing problems,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32199847/