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

怪异。我刚刚使用您的确切代码制作了this 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>

Bootstrap 4模态背景不解雇

1 个答案: