Modal
The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else. Use the .modal class to get started.
HTML
<!-- Simple Modal -->
<div class="modal border flex-container hidden" id="simple-modal">
<div class="modal-content flex-container flex-column">
<h3 class="text-huge">Modal Heading</h3>
<p class="text-huge text-center">This is a simple modal</p>
<button class="btn modal-close" id="close-simple-modal">
<i class="fa fa-times text-huge"></i>
</button>
</div>
</div>
<!-- Modal w/ Button -->
<div
class="modal border flex-container hidden"
id="modal-with-button"
>
<div class="modal-content flex-container flex-column">
<h3 class="text-huge">Modal Heading</h3>
<p class="text-xlg text-center">This is a modal with button</p>
<button class="btn modal-close" id="close-modal-with-button">
<i class="fa fa-times text-huge"></i>
</button>
<button class="btn bg-green rounded">Confirm</button>
</div>
</div>
<!-- Modal Scrollable -->
<div class="modal border flex-container hidden" id="modal-list">
<div class="modal-content">
<h3 class="text-huge">Modal Heading</h3>
<div class="modal-scrollable">
<ul class="list-hoverable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
</div>
<button class="btn modal-close" id="close-modal-list">
<i class="fa fa-times text-huge"></i>
</button>
</div>
</div>
JavaScript
// Simple Modal
const showSimpleModal = document.querySelector('#show-simple-modal');
const simpleModal = document.querySelector('#simple-modal');
const closeSimpleModal = document.querySelector('#close-simple-modal');
showSimpleModal.addEventListener('click', () => toggleModal(simpleModal));
closeSimpleModal.addEventListener('click', () => toggleModal(simpleModal));
// Modal With Button
const showModalWithButton = document.querySelector('#show-modal-with-button');
const modalWithButton = document.querySelector('#modal-with-button');
const closeModalWithButton = document.querySelector('#close-modal-with-button');
showModalWithButton.addEventListener('click', () =>
toggleModal(modalWithButton)
);
closeModalWithButton.addEventListener('click', () =>
toggleModal(modalWithButton)
);
// Modal List
const modalList = document.querySelector('#modal-list');
const closeModalList = document.querySelector('#close-modal-list');
const showModalList = document.querySelector('#show-modal-list');
showModalList.addEventListener('click', () => toggleModal(modalList));
closeModalList.addEventListener('click', () => toggleModal(modalList));
// Utility functions for Opening and Closing the modals
const toggleModal = modalId => {
modalId.classList.toggle('hidden');
};
window.addEventListener('click', e => {
if (e.target.classList.contains('modal')) {
e.target.classList.add('hidden');
}
});