You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.3 KiB
49 lines
1.3 KiB
3 years ago
|
// 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;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
6 years ago
|
|
||
|
document.addEventListener("DOMContentLoaded", () => {
|
||
|
console.log("DOM loaded");
|
||
|
})
|