mediocre-blog/assets/main.js

49 lines
1.3 KiB
JavaScript

// showModal will create the modal structure the first time it is called.
var modal, modalContent;
const showModal = function() {
if (!modal) {
// make the modal
const modalClose = document.createElement('span');
modalClose.id = 'modal-close';
modalClose.innerHTML = '×';
modalContent = document.createElement('div');
modalContent.id = 'modal-content';
const modalBody = document.createElement('div');
modalBody.id = 'modal-body';
modalBody.appendChild(modalContent);
modalBody.appendChild(modalClose);
modal = document.createElement('div');
modal.id = 'modal';
modal.appendChild(modalBody);
// add the modal to the document
document.getElementsByTagName('body')[0].appendChild(modal);
// setup modal functionality
modalClose.onclick = function() {
modal.style.display = "none";
}
}
modalContent.innerHTML = '';
for (var i = 0; i < arguments.length; i++) {
modalContent.appendChild(arguments[i]);
}
modal.style.display = "block";
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
window.onclick = undefined;
}
}
}
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM loaded");
})