ブートストラップ4：複数の画像を使用するときモーダルを閉じることができません

Question

現在、ブートストラップ4内にギャラリーを設定しようとしています。画像をクリック可能にしてより大きなバージョンを開くようにします。しかし、これはうまく動作しますが、複数のスクリプトを使用するとすぐにモーダルを閉じることはできません。ここで

は、これまでの私のコードです：

<div id="Modal01" class="modal"> 
    <span class="close">&times;</span> 
    <img class="modal-content" id="img01"> 
</div> 
    <div class="col-md-3"> 
    <div class="thumbnail"> 
     <img id="TheImage" src="/img/galleryimg1.png"> 
    </div> 
    </div> 

JS：

<script> 
    var modal = document.getElementById('Modal01'); 

    var img = document.getElementById('TheImage'); 
    var modalImg = document.getElementById("img01"); 
    img.onclick = function(){ 
     modal.style.display = "block"; 
     modalImg.src = this.src; 
     captionText.innerHTML = this.alt; 
    } 
    var span = document.getElementsByClassName("close")[0]; 
    span.onclick = function() { 
    modal.style.display = "none"; 
    } 
</script> 

あなたたちは私を助けることができる願っています。

Answer 1

このギャラリー機能を実現する最も簡単な方法は、ブートストラップが提供するjavascriptライブラリを利用することです。これで、マークアップとスクリプトは次の例のように簡単になります。ブートストラップドキュメントのVarying modal contentセクションの下で、この設定について詳しく読むことができます。あなたは完全にbootstrap.jsとjQueryで提供される機能を無視したい、とあなたは純粋なJavaScriptのカスタムソリューションを思い付くしたいと思います、あなたは間違いなく繰り返してはならない可能性は低い場合には

$('#gallery-modal').on('show.bs.modal', function(event) { 
 
    var thumbnail = event.relatedTarget, 
 
     title = thumbnail.alt, 
 
     src = thumbnail.src, 
 
     modal = $(this); 
 

 
    modal.find('.modal-title').text(title); 
 
    modal.find('.img-placeholder').attr('src', src); 
 
});

<div id="gallery" class="container"> 
 
    <div class="row"> 
 
     <div class="col-4"> 
 
      <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/ff0000/ffffff?text=Image+1" alt="Image 1"/> 
 
     </div> 
 
     <div class="col-4"> 
 
      <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/00ff00/ffffff?text=Image+2" alt="Image 2"/> 
 
     </div> 
 
     <div class="col-4"> 
 
      <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/0000ff/ffffff?text=Image+3" alt="Image 3"/> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="gallery-modal" class="modal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <h5 class="modal-title"></h5> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
        <span aria-hidden="true">&times;</span> 
 
       </button> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <img class="img-placeholder img-fluid" src=""/> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

すべてのサムネイルと同じコード。私はあなたがそれをやろうとしていると仮定し、あなたのコードでグローバル変数を扱うとき、それらは上書きされます。その代わりに、モーダル機能を処理してより汎用的な方法でイベントハンドラをアタッチする必要があります。私はこのアプローチをとることはお勧めしませんが、ここでのアイデアのためにここでは純粋なjavascriptの例があります。

// Basic Modal object 
 
var Modal = function() { 
 
    var modal = document.getElementById('gallery-modal'), 
 
     title = modal.querySelector('.modal-title'), 
 
     img = modal.querySelector('.img-placeholder'), 
 
     closeBtns = modal.querySelectorAll('[data-dismiss="modal"]'), 
 
     bodyClassList = document.querySelector('body').classList; 
 

 
    function show(title, src) { 
 
     title.innerText = title; 
 
     img.src = src; 
 

 
     bodyClassList.add('modal-open'); 
 
     modal.style.display = 'block'; 
 
    } 
 

 
    function hide() { 
 
     bodyClassList.remove('modal-open'); 
 
     modal.style.display = 'none'; 
 

 
     title.innerText = ''; 
 
     img.src = ''; 
 
    } 
 

 
    // Handling `click` on "close" buttons 
 
    [...closeBtns].forEach(closeBtn => { 
 
     closeBtn.addEventListener('click', hide); 
 
    }); 
 

 
    return { 
 
     show : show, 
 
    }; 
 
}(); 
 

 
// Handling `click` events on thumbnails 
 
[...document.querySelectorAll('#gallery .img-thumbnail')].forEach(thumbnail => { 
 
    thumbnail.addEventListener('click', function() { 
 
     // `this` is the <img> clicked 
 
     var title = this.alt, 
 
      src = this.src; 
 

 
     // Modal is the global Modal object 
 
     Modal.show(title, src); 
 
    }); 
 
});

<div id="gallery" class="container"> 
 
    <div class="row"> 
 
     <div class="col-4"> 
 
      <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/ff0000/ffffff?text=Image+1" alt="Image 1"/> 
 
     </div> 
 
     <div class="col-4"> 
 
      <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/00ff00/ffffff?text=Image+2" alt="Image 2"/> 
 
     </div> 
 
     <div class="col-4"> 
 
      <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/0000ff/ffffff?text=Image+3" alt="Image 3"/> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="gallery-modal" class="modal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <h5 class="modal-title"></h5> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
        <span aria-hidden="true">&times;</span> 
 
       </button> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <img class="img-placeholder img-fluid" src=""/> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>