function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Taz BoparaiTaz Boparai 

multiple SLDS modals in visualforce page

I want the functionality for multiple modals to open in a visualforce page, from multiple icons. Below is the code that works, BUT on page load both modals appear and have to exit out of them for the rest to work.

Is there an easier way? I am not a developer and this is what I have so far, so any guidance is appreciated!
 
<apex:page lightningStylesheets="true" showHeader="false">
<apex:slds />

<div class="slds-grid slds-wrap" >

	<div class="slds-text-align_center slds-col slds-p-around_large slds-large-size_1-of-8 slds-x-small-size_8-of-8 slds-medium-size_2-of-8 slds-p-bottom_medium slds-p-right_medium"  >
	<a  >
	<div class="xxx" onClick="document.getElementById('id01').style.display='block'" >
		<img src="/sfsites/c/resource/xxx/xxx.png" alt="xxx" text-align="center" />
		<span> xxx </span>
	</div>	
	</a>
	</div>

<div id="id01" >
  <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-hidden="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
      <header class="slds-modal__header">
        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header Number 1</h2>
      </header>
      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
        <p>Test Modal Number 1. This is the first one to appear with this text.</p>
      </div>
      <footer class="slds-modal__footer">
        <button class="slds-button slds-button_neutral" onclick="document.getElementById('id01').style.display='none'">Cancel</button>
      </footer>
    </div>
  </section>
  <div class="slds-backdrop slds-backdrop_open"></div>
</div>


	<div class="slds-text-align_center slds-col slds-p-around_large slds-large-size_1-of-8 slds-x-small-size_8-of-8 slds-medium-size_2-of-8 slds-p-bottom_medium slds-p-right_medium"  >
	<a  >
	<div class="xxx" onclick="document.getElementById('id02').style.display='block'" >
		<img src="/sfsites/c/resource/xxx/xxx.png" alt="xxx" text-align="center" />
		<span> xxx </span>
	</div>	
	</a>
	</div>
    

<div id="id02" >
  <section role="dialog" tabindex="-2" aria-labelledby="modal-heading-02" aria-hidden="true" aria-describedby="modal-content-id-2" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
      <header class="slds-modal__header">
        <h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">Modal Header NUMBER 2</h2>
      </header>
      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-2">
        <p> TEST MODAL NUMBER 2 OPEN AND CLOSE </p>
      </div>
      <footer class="slds-modal__footer">
        <button class="slds-button slds-button_neutral" onclick="document.getElementById('id02').style.display='none'">Cancel</button>
      </footer>
    </div>
  </section>
  <div class="slds-backdrop slds-backdrop_open"></div>
</div>


</div>


<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

// Get the modal
var modal = document.getElementById('id02');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

</script>

</apex:page>