Bootstrap 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

Weird. Я только что сделал 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>