How to actually use modal boxes

Question

I know how to create A modal box. Just one though. But how do we use multiple modal boxes?

Should I go ahead and create the elements for every different info in the html and display on/off when event happens, or should I create the elements with js when the event happens.

1. already making the elements with html:
html:
<div class = "modal">
<h1> WOW BOX 1 </h1>
<p> congrats you opened box one </p>
</div>

<div class = "modal">
<h1> OMG! how did you open box 2 </h1>
<p> You are incredible. You clicked a button to open this </p>
</div>

<div class = "modal">
<h1> INSANE </h1>
<p> How did you find the third box? huh, crazy right. </p>
</div>

Now if I want to display box "two":

js:
x.onclick = modal[1].style.display = "block";

// if i want to display box 3:

y.onclick = modal[2].style.display = "block";

--------------

2. create the elements with JS
// this is the other method i'm thinking of:

js:

createElement("div").className = "modal";
modal.innerHTML = "<h1> Wow You clicked on button 1 </h1> <p> abcd </p>";
body.appendChild(modal);

now I just created a modal.
Using this method, I can just call a function that creates a modal box, and change up things, like modal.innerHTML = "<h2> HI </h2>"
-----------
Or do you guys have a different idea?

Answer 1

Does it mean you want to create a box? CSS or html

Answer 2

Michael’s World Official Doraemon NBA no. not just a box.

a modal. which is kinda like a custom alert.

Answer 3

Oh.

Answer 4

You can use alert("your text")

Answer 5

Or you can use plugin from web