Question

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

这是模态触发代码：

<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

Answer 1

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

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

border-top

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

如何修复bootstrap模态不透明度错误？

1 个答案: