How do I start this from a function?

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:

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);
function customprompt(Header, Body) {
closeModalButtons.forEach((button) => {
  button.addEventListener("click", () => {
    const modal = button.closest(".modal");
function openModal(modal) {
  if (modal == null) return;
overlay.addEventListener("click", () => {
  const modals = document.querySelectorAll("");
  modals.forEach((modal) => {
function closeModal(modal) {
  if (modal == null) return;


<button data-modal-target="#modal">
    <div class="modal" id="modal">
      <div class="modal-header">
        <div class="title">Example</div>
        <button data-close-button class="close-button">&times;</button>
      <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 id="overlay"></div>


.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%;
} {
  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;
} {
  pointer-events: all;
  opacity: 1;

Can this help you?

It’s on a regular website not node.js. I edited it so you can see the css so you can see how it works

:rofl: No you can use it on a static website, it has a cdn

I just realized thanks

Thanks too!

couldnt you have started it from the <body> tag?

That’s all that was is in the body tag

no I mean like

<body onload=“something()”>

I have no idea why the tutorial didn’t use that.

Anyway, other way to start the function would be:

<button onclick="something()">
Open modal
1 Like

Instead of using that module I just figured out how to do it myself


Awesome, but I like to use that library because it has some cool features!

1 Like

Mime has better features

:rofl: I just searched google for “modal js” and it showed in first place

I think this website should help you


you just got a taste from your own medicine



I hope this website have better explanation.