引导 4 模式背景不关闭

Question

我在 BS4 模态关闭时不关闭模态背景类时遇到了问题。不知道这里发生了什么，模态通常非常简单！这是我的代码：

<header>
    <ul class="nav pull-right">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#menu">
                <span class="fa fa-bars"> Menu</span>
            </button>
        </li>
    </ul>
    <div id="menu" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="fa fa-times" aria-hidden="true"></span>
                    </button>
                    <nav class="nav flex-column">
                        <a class="nav-link active" href="#">Active</a>
                        <a class="nav-link" href="#">Link</a>
                        <a class="nav-link" href="#">Link</a>
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>

Answer 1

很奇怪。我只是用你的确切代码制作了这个 jsfiddle，它可以工作。当我点击模态背景时，一切都消失了。我确实确保首先添加jQuery，然后是bootstrap js和css。顺序很重要。

<ul class="nav pull-right">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#menu">
            <span class="fa fa-bars"> Menu</span>
        </button>
    </li>
</ul>
<div id="menu" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span class="fa fa-times" aria-hidden="true"></span>
                </button>
                <nav class="nav flex-column">
                    <a class="nav-link active" href="#">Active</a>
                    <a class="nav-link" href="#">Link</a>
                    <a class="nav-link" href="#">Link</a>
                    <a class="nav-link disabled" href="#">Disabled</a>
                </nav>
            </div>
        </div>
    </div>
</div>