Bootstrap 模态:class=“模态淡入淡出"；造成问题 [英] Bootstrap modal: class="modal fade" causing problems

查看：44
本文介绍了Bootstrap 模态:class=“模态淡入淡出"；造成问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用引导模式教程在我的 view.ejs 文件中工作.但是 class="modal fade" 似乎引起了问题.如果我删除 class="modal fade" 模态永久显示，但如果我将它保留在代码中，当我单击按钮时不会发生任何事情.

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

根据我发现其他人遇到的其他问题，我尝试在其他 CSS 文件中搜索淡入淡出，但找不到任何内容.也尝试在上面的代码之前添加这个，没有帮助:

.fade {不透明度:0；-webkit-transition:不透明度 0.15s 线性；过渡:不透明度 0.15 秒线性；}.modal.fade .modal-dialog {-webkit-transform: 翻译 (0, 0);-ms-transform: 翻译 (0, 0);//仅 IE9变换:翻译(0, 0)；}

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

解决方案

不确定是否有人会阅读此内容，但我们遇到了一些用户(并非所有用户)的问题.

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

<预>@media (prefers-reduced-motion: reduce) {.modal.fade .modal-dialog {过渡:无；}}

从 bootstrap 中删除此功能后，模态可以与遇到问题的用户一起使用淡入淡出"类.

关于媒体查询的更多信息:

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

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

I am trying to get a bootstrap modal tutorial to work in my view.ejs file. But the class="modal fade" seems to be causing a problem. If I remove the class="modal fade" the modal permanently shows up, but if I keep it in the code nothing happens when I click on the button. 

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

From other problems I've found other people to have, I tried to search for fade in other CSS files but cannot find anything. Also tried to add this before the code above, didn't help:

.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);
}

I am new to web development and might be missing something small, please help me

解决方案

Not sure if anyone will read this, but we had this problem with a few users (not all users).

Turns out it was related to this css, which activates when you turn off window animations at the OS level:


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

Removing this from bootstrap made modals work with the 'fade' class for users experiencing issue.

More on the media query here:

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

Obviously removing the query is not ideal for people with reduced motion switched on.

这篇关于Bootstrap 模态:class=“模态淡入淡出"；造成问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆