我真的对此感到困惑。。。我正在使用bootstrap 4，我想要一个非动画（褪色）模式在官方网站上它说移除“褪色”类，所以我移除了它，但它停止工作，莫代尔div在那之后不再出现，仍然添加“显示:无”当我点击按钮。
null
<button class="btn btn-primary btn-lg" data-target="#mobileMessageBox" data-toggle="modal" type="button" onclick="getTalkCQSP(this)">TEST</button>
<div id="mobileMessageBox" class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"
style="max-height: 100vh; ">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body p-0">
</div>
</div>
</div>
</div>null
确保包含引导程序的所有必要CSS和JavaScript文件:
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
注意:还要确保不要用自己的自定义CSS隐藏模式。
使用所有CSS和JavaScript文件，您给出的示例都可以工作:
null
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<button class="btn btn-primary btn-lg" data-target="#mobileMessageBox" data-toggle="modal" type="button" onclick="getTalkCQSP(this)">TEST</button>
<div id="mobileMessageBox" class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"
style="max-height: 100vh; ">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body p-0">Hello
</div>
</div>
</div>
</div>