Bootstrap 4 модальный фон не увольняя

У меня есть проблема с модалями BS4, не отклоняющими класс modal-backdrop, когда модальный закрыт. Не уверен, что происходит здесь, модалы, как правило, довольно прямо вперед! Вот мой код:

<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>

1 ответ

  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>