You need to sign in to do that
Don't have an account?
Taz 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!
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>