How to Use Bootstrap Modals Without jQuery

#css #javascript #html

NOTE: The intructions here are not relevant to the most recent versions of Bootstrap - they removed jQuery

One of the disadvantages of Bootstrap is that it depends on jQuery (at least up until the laest versions) and it's own Bootstrap JS files for some functions such as modals. If all you want is a simple modal and have no other use for the JS, this can add a good few unnecessary kilobytes of JavaScript you don't actually need to your page. However, it's not too difficult to work around - in fact, it requires less than 20 lines of JS. The full code is here

We use the same HTML as the normal Bootstrap modals, except with the extra attributes being replaced by click handlers, and an extra div (backdrop) which displays the grey background.

<button type="button" class="btn btn-primary" onclick='openModal()'>
    Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-modal="true"
    role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" aria-label="Close" onclick="closeModal()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="modal-backdrop fade show" id="backdrop" style="display: none;"></div>

The JavaScript simply alters the backdrop and modal display when required, as well as adding and removing the show class. The last few lines can be deleted so that it doesn't close after a click elsewhere in the page.

function openModal() {
    document.getElementById("backdrop").style.display = "block"
    document.getElementById("exampleModal").style.display = "block"
    document.getElementById("exampleModal").classList.add("show")
}
function closeModal() {
    document.getElementById("backdrop").style.display = "none"
    document.getElementById("exampleModal").style.display = "none"
    document.getElementById("exampleModal").classList.remove("show")
}
// Get the modal
var modal = document.getElementById('exampleModal');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    closeModal()
  }
}

Top comments (6)

Baris • Dec 3 '21 • Edited

Firstly, thank you for this helpful post.
I guess, from B5 we can handle the situation without using jQuery and also without a lot of code lines like in your post.

Usage via js:

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show()
getbootstrap.com/docs/5.0/componen...

If I am right, you should indicate that in your post more clear because mind of newcomers/rookies like me, can be confused :)

Anna Aitchison • Dec 5 '21

This post was made before they removed jQuery themselves. I'll edit it

Gabriel Gonzalez • Jun 22 '21

I'm trying this but with BS3, I'm not adding the backdrop from react, instead I'm letting Bootstrap and Jquery to handle that part (I'm loading both from a CDN inside the html file).

I can close the modal without any issue but when I tried to open it again I need to click the button twice (not sure what the first click does but the second is the one that open the modal)

Anna Aitchison • Jun 25 '21

If you're loading jQuery anyway, it probably doesn't make sense to use this method, also this wasn't tested with BS3. That said, sounds like a invisible brackdrop is present, I'd use dev tools in the browser to check