w3.css Modal issues

[Ron Brinkman]

I am using the "Close the Modal" option at the bottom of the https://www.w3schools.com/w3css/w3css_modal.asp page and have run into several issues:

1. The simple example is straightforward and works fine.  It seems hard-coded, however, for implementing a single modal per web page.  I am using a crude workaround of making a copy of the Javascript each time I add a modal, changing id01 to id02, id03, id04, etc. for each new use.  Is there a generic solution available that uses an argument passed to the Javascript rather than the hard-coded ID?
2. When implementing as above, sometimes clicking the "x" will close it, sometimes clicking outside the modal will close it.  Users will probably figure this out, but it's a bit clumsy.  Is a generic solution available as described above that makes each instance of the modal work as expected?
3. The example appears to be designed to be inserted at the end of a structure such as a paragraph.  I'm guessing that's caused by being inside <div></div> tags.  Many models I would like to insert are activated by clicking a small icon that is inline with the naturally reading text.  Is a generic solution available that always works inline, giving the author the ability to insert the appropriate structure breaks manually if needed?

Best Regards,

Ron Brinkman

[Ingolme]

Here's a generic solution for closing any modal by clicking outside of it

window.onclick = function(event) {
  if (event.target.classList.contains("w3-modal")) {
    event.target.style.display = "none";
  }
}

 

Quote

When implementing as above, sometimes clicking the "x" will close it, sometimes clicking outside the modal will close it.  Users will probably figure this out, but it's a bit clumsy.  Is a generic solution available as described above that makes each instance of the modal work as expected?

If you have the "x" button in a modal, it should always close the modal when you click on it. Clicking outside a modal also can close the modal. Is this the behavior you're expecting? If not, let me know how you want it to behave.

 

Quote

The example appears to be designed to be inserted at the end of a structure such as a paragraph.  I'm guessing that's caused by being inside <div></div> tags.  Many models I would like to insert are activated by clicking a small icon that is inline with the naturally reading text.  Is a generic solution available that always works inline, giving the author the ability to insert the appropriate structure breaks manually if needed?

I'm not sure what you're referring to. Anything with an onclick attribute should be able to open a modal. You can have it embedded within a paragraph like this:

<p>Click on <span onclick="document.getElementById('id01').style.display='block'">HERE</span> to open the modal.</p>

 

[Ron Brinkman]

Thank you for your reply.

I chose the "Close the Modal" option on purpose because it would permit the user to close the modal either way, thinking that would be best from a user standpoint.  If I have only one modal per page this feature works as expected.  If I have multiple modals on a page, some modals will close only with the "X" and others only by clicking outside the modal - a mixed bag.

I must have stumbled onto a more complicated way of doing a modal that permits the modal to be closed by either clicking the "X" or clicking outside the modal, than you did.  In the "Close the Modal" example it uses divs like so:

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2>Modal Header</h2>
      </header>
      <div class="w3-container">
        <p>You have two options to close this modal:</p>
        <p>Click on the "x" or click anywhere outside of the modal!</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>Modal Footer</p>
      </footer>
    </div>
  </div>
</div>

The divs appear to the the things that force the structure breaks.

Your example is MUCH simpler, and it appears it would permit inline icons by replacing "HERE" in your example above with '<img src="icon.jpg">'.  I'm overlooking the simpler method if it's on the same web page as the "Close the Modal" example(?!?).  Also, the example opens the modal - but where does the text/image that is to be displayed placed?

Best Regards,

Ron Brinkman

[Ingolme]

The content of the modal goes inside the modal structure. There will need to be one of these structures for each different object you want to show in a modal, each with its own unique id.

<div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2>Modal Header</h2>
      </header>
      <div class="w3-container">
        
        IMAGES AND TEXT GO IN HERE
        
      </div>
      <footer class="w3-container w3-teal">
        <p>Modal Footer</p>
      </footer>
    </div>
  </div>

 

[Ron Brinkman]

Thank you for providing the generic solution - and - for helping clarify for me how the modal structure works in the first place.

Now works as I had hoped.