I followed a tutorial to make a custom prompt. It works and all however it only activates from a button. Not only that you can’t edit what the prompt is each time. I was wondering if there was a way to activate the prompt like this cprompt(Heading, Text). Here is my code:
JavaScript
const openModalButtons = document.querySelectorAll("[data-modal-target]");
const closeModalButtons = document.querySelectorAll("[data-close-button]");
const overlay = document.getElementById("overlay");
openModalButtons.forEach((button) => {
button.addEventListener("click", () => {
const modal = document.querySelector(button.dataset.modalTarget);
openModal(modal);
});
});
function customprompt(Header, Body) {
}
closeModalButtons.forEach((button) => {
button.addEventListener("click", () => {
const modal = button.closest(".modal");
closeModal(modal);
});
});
function openModal(modal) {
if (modal == null) return;
modal.classList.add("active");
overlay.classList.add("active");
}
overlay.addEventListener("click", () => {
const modals = document.querySelectorAll(".modal.active");
modals.forEach((modal) => {
closeModal(modal);
});
});
function closeModal(modal) {
if (modal == null) return;
modal.classList.remove("active");
overlay.classList.remove("active");
}
HTML
<button data-modal-target="#modal">
open
</button>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">Example</div>
<button data-close-button class="close-button">×</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
</div>
</div>
<div id="overlay"></div>
CSS
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease;
border: 1px solid white;
border-radius: 10px;
z-index: 10;
background-color: #333333;
width: 500px;
max-width: 80%;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
}
#overlay {
position: fixed;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 200ms ease-in-out;
background-color: rgba(0, 0, 0, 0.5);
pointer-events: none;
}
#overlay.active {
pointer-events: all;
opacity: 1;
}
No you can use it on a static website, it has a cdn
