From multiple modals from open start or load page

Question

1.00/5 (3 votes)

See more:

I need a modals[index] so I can read modal 1 from start?

HTML

<h2>1st Modal</h2>


Open Modal


<div id="myModal1" class="modal">

  
  <div class="modal-content">
    <div class="modal-header">
      ×
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<h2>2nd Modal</h2>


Open Modal


<div id="myModal2" class="modal">

  
  <div class="modal-content">
    <div class="modal-header">
      ×
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

[edit]
Added by OP as a solution:
Okay.

Creating Multiple Modals on a Single Page

https://www.codeproject.com/Questions/5384491/From-multiple-modals-from-open-start-or-load-page

Yes I understood it.

Now I wanted a open modal from loading start page. I know it click by index 0 - 1 or 1 - 2

My question goes, how can you open modal 1 in a body using javascript ,

and then open it!

Thanks
[edit]

What I have tried:

JavaScript

<body onload="openstartpage();">

// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
    }
 }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
     }
    }
}

I need a modals[index] so I can read modal 1 from start?

Posted 28-Jun-24 1:18am

Mark Rene Jensen

Updated 28-Jun-24 18:27pm

OriginalGriff

v3

Add a Solution

Comments

Richard Deeming 28-Jun-24 11:25am

"I need" and some unexplained code does not make this a good question.

Start by explaining precisely what you are trying to achieve, what you have tried, and where you are stuck. Include the full details of any errors.

I'm sure "I need a modals[index] so I can read modal 1 from start" means something to you; but the rest of us don't have the faintest clue.

Mark Rene Jensen 28-Jun-24 11:49am

Ok new question is written

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)