时间戳

首页 > 解决方案 > 如何修复引导模式不透明度错误？

bootstrap-4 - 如何修复引导模式不透明度错误？

问题描述

我最近刚刚使用了“引导模式”，但在显示模式本身时遇到了问题。模态工作正常。但是，模态背景本身似乎是纯黑色。模态背景本身应该是透明的吗？老实说，我在这里找不到错误。

这是模态触发代码：

<label for="notes">
    <a href="#notes" data-toggle="modal">
        <i class="fa fa-sticky-note"></i> Create Notes
    </a>
</label>

这是模态：

<div class="modal" id="notes" role="dialog"> <!-- modal -->
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="#" method="post">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <textarea name="note_title" placeholder="Your title here. 48 characters max only." pattern="{1,48}"></textarea>
                <textarea name="note_record"></textarea>
                <button type="submit" name="submit_notes" style="float: right;"><i class="fa fa-paper-plane"></i> Submit</button>
            </form>
        </div>
    </div>
</div>

这是模式激活之前的输出 https://imgur.com/a/fsJdr0W

这是激活时的模式（单击蓝色的“创建注释”链接） https://imgur.com/a/uFRCylT

感谢您提供可能的答案，stackoverflow

标签： bootstrap-4bootstrap-modal

解决方案

您似乎在使用 Bootstrap-3 的 JS 时使用 Bootstrap-4 CSS

使用正确的 bootstrap.js 库可以解决此问题。

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

这是相同的js小提琴：https ://jsfiddle.net/9c2u143s/

推荐阅读