Bootstrap modal：class =“modal fade”造成问题 [英] Bootstrap modal: class="modal fade" causing problems

问题描述

我想获得一个引导模式教程在我的view.ejs文件中工作。但是 class =modal fade似乎导致了一个问题。如果我删除class =模态淡化模态永久显示，但如果我保留在代码中，当我点击按钮没有任何反应。

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>

从其他问题我发现其他人有，我试图搜索淡入其他CSS文件，但找不到任何东西。也尝试在上面的代码之前添加这个，没有帮助：

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

我是新的web开发，可能会缺少一些小的，请帮助我

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

推荐答案

可能有些问题，你正在做，创建自己的小提琴，并在这里分享。
我使用你的代码，它的工作正常！我只是添加了模态和淡入淡出的类，它只打开，当我点击按钮

There might be something wrong you are doing, create your own fiddle and share it here.! I used your code, and its working fine! I just added the modal and fade classes to it, and it opens only when I click on the button

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>

这篇关于Bootstrap modal：class =“modal fade”造成问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！