How do I start this from a function?

Coding Help
,
1

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">&times;</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;
}
2

Can this help you? https://micromodal.vercel.app/

3

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

4

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

5

I just realized thanks

6

Thanks too!

7

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

8

That’s all that was is in the body tag

9

no I mean like

<body onload=“something()”>
10

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

11

Anyway, other way to start the function would be:

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

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

2 Likes
13

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

1 Like
14

Mime has better features

15

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

16

I think this website should help you

17

🤔❓

18

you just got a taste from your own medicine

19

:thinking::question::grey_question::question::thinking:

21

Google Cloud Training in Chennai? (is that spam?)

2 Likes