Modal Dialogs in Bootstrap

Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes. This example shows how to use HTMX to display dynamic dialog using Bootstrap, and how to trigger its animation styles in Javascript.

We start with a button that triggers the dialog, along with a DIV at the bottom of your markup where the dialog will be loaded:

<button 
	hx-get="/modal" 
	hx-target="#modals-here" 
	hx-trigger="click"
	class="btn btn-primary"
	_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button>

<div id="modals-here"></div>

This button uses a GET request to /modal when this button is clicked. The contents of this file will be added to the DOM underneath the #modals-here DIV.

We’re replacing Bootstrap’s javascript widgets with a small bit of Hyperscript to provide smooth animations when the dialog opens and closes.

Finally, the server responds with a slightly modified version of Bootstrap’s standard modal

<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
<div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
	<div class="modal-dialog modal-dialog-centered">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title">Modal title</h5>
		</div>
		<div class="modal-body">
		  <p>Modal body text goes here.</p>
		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
		</div>
	  </div>
	</div>
  </div>

We’re replacing the standard Bootstrap Javascript library with a little bit of Javascript, which triggers Bootstrap’s smooth animations.

function closeModal() {
	var container = document.getElementById("modals-here")
	var backdrop = document.getElementById("modal-backdrop")
	var modal = document.getElementById("modal")

	modal.classList.remove("show")
	backdrop.classList.remove("show")

	setTimeout(function() {
		container.removeChild(backdrop)
		container.removeChild(modal)
	}, 200)
}

🔗Demo