부트 스트랩 4 모달 배경 해제하지 않음

모달을 닫을 때 모달 백 드롭 클래스를 해제하지 않는 BS4 모달 문제가 있습니다. 여기서 무슨 일이 벌어지고 있는지 모른 채 모달은 일반적으로 꽤 똑바로됩니다! 내 코드는 다음과 같습니다.부트 스트랩 4 모달 배경 해제하지 않음

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

출처

2017-01-13 Sandra Willford

이상. 방금 정확한 코드로 this jsfiddle을 만들었고 작동합니다. 모달 배경을 클릭하면 모두 사라집니다. jQuery를 먼저 추가 한 다음 부트 스트랩 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>

출처

2017-01-13 19:09:10 Casey

가 나는 및 JQuery와 CSS에로드하고, 문서의 끝에 bootstrap.js있다. 이것이 사물에 영향을 미칠 것입니까? –

이 문제는 내가 사용하고있는 CMS에서 충돌이있는 것으로 판명되었습니다. 그들은 lib.min.js 파일에 포함 된 v3 용 부트 스트랩 js를 갖고 있으며 부트 스트랩 JS를 두 번로드하고있었습니다. 내가 lib 파일에서 그것을 제거하고 모두 고사 지금 좋다. –

잘 듣고있어, Sandra. – Casey

부트 스트랩 4 모달 배경 해제하지 않음

답변

관련 문제