Bootstrap 4: Can't close modals when using more than one


I am currently trying to set up a gallery within Bootstrap 4. Now I want to have the images clickable and open a larger version of it. This works fine however as soon as I use more than one Script it won't let me close the modals anymore.

Here is my code so far:

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

Hope you guys can help me.

The easiest way to achieve that gallery functionality would be to make use of the javascript library Bootstrap provides. With that, your markup and script could be as simple as in the example below. You can read more on this setup under the Varying modal content section of the Bootstrap docs as well.

$('#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>

In the unlikely case you would like to completely ignore the functionality provided by bootstrap.js and jQuery, and you would like to come up with a pure javascript custom solution, you should definitely not repeat the same code with every thumbnail. I assume you are trying to do that, and as you work with global variables in your code, they get overwritten. Instead you should handle the modal functionality and attach the event handlers in a more generic way. I do not recommend to take this approach, but just for the sake of the idea here is an example with pure 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"/>