앵커 클릭 및 회전식 컨트롤로 모달을 닫습니다.

Question

그림 축소판 그림을 클릭하면 나타나는 회전 목마가있는 모달이 있습니다. 문제는 그림 사이를 탐색하는 데 사용되는 화살표를 클릭 할 때마다 모달이 닫힙니다. 이미지는 <div class="carousel-inner">가

$(document).ready(function() { 
    $('#myTab a').click(function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 

    /* activate the carousel */ 
    $("#modal-carousel").carousel({interval:false}); 

    /* change modal title when slide changes */ 
    $("#modal-carousel").on("slid.bs.carousel", function() { 
     $(".modal-title") 
     .html($(this) 
     .find(".active img") 
     .attr("title")); 
    }); 

    /* when clicking a thumbnail */ 
    $(".thumbnail").click(function() { 
    var content = $(".carousel-inner"); 
    var title = $(".modal-title"); 
    content.empty(); 
    title.empty(); 

    var id = this.id; 
    var repo = $("#img-repo .carousel-item"); 
    var repoCopy = repo.filter("#" + id).clone(); 
    var active = repoCopy.first(); 

    active.addClass("active"); 
    title.html(active.find("img").attr("title")); 
    content.append(repoCopy); 

    // show the modal 
    $("#modal-gallery").modal("show"); 
    }); 

}); 

몇 일 전에

HTML

<div class="modal fade" id="modal-gallery" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
      </div> 
      <div> 
       <div id="modal-carousel" class="carousel slide" data-ride="carousel"> 

        <div class="carousel-inner" role="listbox"> 
        </div> 

        <a class="carousel-control-prev left" href="#modal-carousel" role="button" data-slide="prev"> 
         <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
         <span class="sr-only">Previous</span> 
        </a> 
        <a class="carousel-control-next right" href="#modal-carousel" role="button" data-slide="next"> 
         <span class="carousel-control-next-icon" aria-hidden="true"></span> 
         <span class="sr-only">Next</span> 
        </a> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 

자바 스크립트 비어있는 이유는 마법처럼 일을하고 모르는의 데이터베이스에서 동적으로로드 나는 그것을 깰 무엇을 했는가.

감사

Answer 1

당신이 .modal-content을 잊지 문제를 호출하여 모델을 퇴색하고, 높은 구조적 요소에 클릭 이벤트를 전파 중지 확인의 책임이있는 요소의 아이에 클릭 이벤트를 추가하는 것입니다

<div class="modal fade" id="modal-gallery" role="dialog"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"><!-- .modal-content class added --> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
     </div> 
     <div> 
      <div id="modal-carousel" class="carousel slide" data-ride="carousel"> 
       <div class="carousel-inner" role="listbox"> 
       </div> 
       <a class="carousel-control-prev left" href="#modal-carousel" role="button" data-slide="prev"> 
        <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
       </a> 
       <a class="carousel-control-next right" href="#modal-carousel" role="button" data-slide="next"> 
        <span class="carousel-control-next-icon" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
       </a> 
      </div> 
     </div> 
    </div> 
</div> 

0 : 만 .modal-dialog의 직접적인 아이 인 당신의 코드는 다음과 같이해야합니다 The Official Bootstrap Site

에서 샘플을 볼

modal-dialog에 이미 div의 어린이가 있지만 수업은 없습니다.

class="modal-content"을 추가하면 제대로 작동합니다.

Answer 2

문제는 콘텐츠가 이벤트를 클릭하여 수신하고 모달을 닫 요소 내부에 있다는 것입니다. 문제를 이해하는 데 도움이되도록 간단히 설명하겠습니다.

X와 Y 태그가 있다고 가정 해 보겠습니다. Y 태그는 X의 자손이거나 구조적으로 X 내부에 있습니다. Y를 클릭하면 클릭 이벤트가 발생하고 부모 태그에서 클릭 이벤트가 발생하고 두 번째 클릭 (이 시간은 부모의 Y)가 처리되고 부모 (Y)의 부모에서 클릭이 트리거되므로 Y를 클릭하면 Y의 모든 조상이 클릭됩니다. 이는 기본 동작입니다.

문제는 앵커를 클릭하면 마침내 클릭 할 때 클릭하면 모달을 닫아야한다는 것입니다. 이 솔루션은

e.stopPropagation();