const modals = {
0: {
type: 'text',
buttonName: 'First Modal',
header: "Header for the First Modal",
footer: "Footer for the first modal",
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora, tenetur temporibus voluptatem quaerat facere sapiente quod aliquid veniam culpa itaque eius quibusdam vitae beatae magnam repellendus laborum molestias a.'
},
1: {
type: 'image',
buttonName: '1st Image',
header: false,
footer: 'This is a brief explaination of the image.',
content: 'http://3.imimg.com/data3/VL/AV/MY-1921873/noida-authority-building-noida-uttar-pradesh-india-500x500.jpg'
},
2: {
type: 'image',
buttonName: '2nd Image',
header: false,
footer: 'This is another brief explaination of the image.',
content: 'http://3.bp.blogspot.com/-I6NbACJixe4/TcQiPSDyXMI/AAAAAAAAAAo/7rFILVJI5sI/s1600/paisagens-naturais-brasil-2.jpg'
},
3: {
type: 'text',
buttonName: 'Fourth Modal',
header: "This is the fourth Modal",
footer: "This is the footer for the fourth modal",
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora, tenetur temporibus voluptatem quaerat facere sapiente quod aliquid veniam culpa itaque eius quibusdam vitae beatae magnam repellendus laborum molestias a.'
},
}
let cont = document.getElementById('modals');
let buttons = document.getElementById('buttons');
let images = document.getElementById('images');
// function to construct a text modal
function constTextModal(mod) {
let button = document.createElement("BUTTON");
let createModal = document.createElement("DIV");
let createModalContent = document.createElement("DIV");
let createModalHeader = document.createElement("DIV");
let createCloseBtn = document.createElement("SPAN");
let h2 = document.createElement("H2");
let createModalBody = document.createElement("DIV");
let modalPar = document.createElement("P");
let createModalFooter = document.createElement("DIV");
let h3 = document.createElement("H3");
button.classList.add('textBtn');
button.classList.add('modalBtn');
button.textContent = `Open ${modals[mod].buttonName}`;
createModal.classList.add('modal');
createModalContent.classList.add('modal-content');
createModalHeader.classList.add('modal-header');
createCloseBtn.classList.add('closeBtn');
createModalBody.classList.add('modal-body');
createModalFooter.classList.add('modal-footer');
buttons.append(button);
cont.append(createModal);
createModal.append(createModalContent);
createModalContent.append(createModalHeader, createModalBody, createModalFooter);
createModalHeader.append(createCloseBtn, h2);
createModalBody.append(modalPar);
createModalFooter.append(h3);
createCloseBtn.textContent = 'x';
h2.textContent = modals[mod].header;
modalPar.textContent = modals[mod].content;
createModalFooter.textContent = modals[mod].footer;
}
// function to contruct an image modal
function constImageModal(mod) {
let button = document.createElement("BUTTON");
let createModal = document.createElement("DIV");
let createModalContent = document.createElement("DIV");
let createCloseBtn = document.createElement("SPAN");
let createModalHeader = document.createElement("DIV");
let createModalBody = document.createElement("DIV");
let modalImg = document.createElement("IMG");
let createModalFooter = document.createElement("DIV");
let h3 = document.createElement("H3");
button.classList.add('textBtn');
button.classList.add('modalBtn');
button.textContent = `Open ${modals[mod].buttonName}`;
createModalHeader.classList.add('img-header');
createModal.classList.add('modal');
createModalContent.classList.add('modal-content');
createCloseBtn.className = 'closeBtn imgCloseBtn';
createModalBody.classList.add('modal-body');
modalImg.classList.add('modalImg');
createModalFooter.classList.add('modal-footer');
buttons.append(button);
cont.append(createModal);
createModal.append(createModalContent);
createModalHeader.append(createCloseBtn);
createModalContent.append(createModalHeader, createModalBody, createModalFooter);
createModalBody.style.cssText = 'display: flex; justify-content: center; align-items: center;';
createModalBody.append(modalImg);
createModalFooter.append(h3);
createCloseBtn.textContent = 'x';
modalImg.src = modals[mod].content;
createModalFooter.textContent = modals[mod].footer;
}
// conditional to check obj type
for (let mod in modals) {
if (modals[mod].type === 'text') {
constTextModal(mod);
} else if (modals[mod].type === 'image') {
constImageModal(mod);
} else {
// different type oif medium
}
}
// get the modal element
let modal = document.querySelectorAll('.modal');
// get the modal button
let modalBtn = document.querySelectorAll('.modalBtn');
// get the close button
let closeBtn = document.querySelectorAll('.closeBtn');
// event listener to open the modal
modalBtn.forEach((el, i) => openModal(el, i));
// function to open the targeted modal
function openModal(el, i) {
el.addEventListener('click', () => {
modal[i].style.animationName = 'animateModal';
modal[i].style.display = 'flex';
})
}
// event listener to close the modal on closeBtn
closeBtn.forEach((el, i) => closeButton(el, i));
// function to close the targeted modal
function closeButton(el, i) {
el.addEventListener('click', () => {
modal[i].style.animationName = 'closeModal';
setTimeout(() => {
modal[i].style.display = 'none';
}, 500);
})
}
// event listener to close the modal on window click
window.addEventListener('click', clickOutside);
// funciton to close the targeted modal on outside click
function clickOutside(e) {
modal.forEach((el, i) => {
if (e.target == el) {
modal[i].style.animationName = 'closeModal';
setTimeout(() => {
modal[i].style.display = 'none';
}, 500);
}
})
}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.6;
}
.modalBtn {
background: coral;
padding: 1em 2em;
color: #fff;
border: 0;
}
.imgCloseBtn {
padding-right: 20px;
}
.modalBtn:hover{
background-color: #333;
}
.modal {
display: none;
align-items: stretch;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
animation-name: animateModal;
animation-duration: 0.7s;
animation-timing-function: ease-in-out;
}
.modal-content {
background: #f4f4f4;
display: flex;
align-items: stretch;
flex-direction: column;
margin: 20% auto;
max-width: 70%;
box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.2);
animation-name: animateModal;
animation-duration: 0.7s;
animation-timing-function: ease-in-out;
border-radius: 21px;
}
.modal-header h2, .modal-footer h3 {
margin: 0;
}
.modal-header {
background: coral;
padding: 15px;
color: #f4f4f4;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.modal-body {
padding: 10px 20px;
background-color: #fff;
}
.modal-footer {
background: coral;
padding: 10px;
color: #fff;
text-align: center;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.closeBtn {
color: #ccc;
font-size: 20px;
float: right;
}
.closeBtn:hover, .closeBtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
@keyframes animateModal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes closeModal {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<div id="buttons">
</div>
<div id="images">
</div>
<div id="modals">
</div>
