Bootstrap模态：class =“modal fade”导致问题-Java 学习之路

我想在我的view.ejs文件中使用bootstrap模态教程 . 但 class="modal fade" 似乎造成了问题 . 如果我删除了类= "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);
}

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

1 回答

-1

你可能有些不对劲，创造自己的小提琴并在这里分享 . 我用过你的代码，工作正常！我刚刚添加了模态和淡入淡出类，只有当我点击按钮时它才会打开

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>

回复于 2024-04-29T08:10:24+08:00

Bootstrap模态：class =“modal fade”导致问题

1 回答

相关问题