1

I was wondering if anyone had a small example of any of the modal windows working SLDS Modals. The first example is what I am attempting to replicate. I have all of the SLDS resources loading as static resources and have even inspected the .css to ensure the .slds-modal css is there.

I couldn't get them to work, so I am temporarily(hopefully) using bootstrap and jQuery to get my error modals up and running for some VF/Lex pages.

I have put the code straight into a codepen and it doesn't look right there either.

I am new to SLDS as well as using modals at all. This is what I am currently getting, and yes the html is properly formed from inspecting the elements in the DOM.

modal errors

An image of the markup to show it matches the example:

html markup image

Any help or an example of something working would be great. Thanks.

Improve this question
1
  • It does not look like you have the SLDS resource loaded. What you show in the picture is what it looks like if the SLDS resources did not load or you forgot to include them
    – Eric
    Feb 14, 2017 at 4:19

3 Answers 3

Reset to default
1

Add <apex:slds /> to your page and wrap your code in a container

<div class="slds-scope">...</div>

Sample code can be:

<apex:page>
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <!-- Import the Design System style sheet -->
            <apex:slds />
       </head>
    <body>
        <div class="slds-scope">...</div>
    </body>
   </html>
</apex:page>

Hope this helps you!

Improve this answer
0

The LDS modals given are just the css styling , there is no js or jquery given by the LDS. So you would have to write explicit jquery to show and hide the modal. It is just the CSS of the modal given by the LDS.

Improve this answer
0

Use the code , call the Javascript method openDeleteConfirm to open the dialogue box and call this method closeWindow() to close the dialogue window.

<apex:page id="idMyPage" standardStyleSheets="false" showHeader="false" sidebar="false"  >
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1"/>
            <apex:stylesheet value="{!URLFOR($Resource.SLDS092, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

        </head>
        <apex:form id="idForm" styleClass="slds">
            <div aria-hidden="false" role="dialog" class="slds-modal slds-fade-in-close" id="idDialog">
                <div class="slds-modal__container" style="width:25%">
                    <div class="slds-modal__content">
                        <div>
                            <div class="slds-grid slds-wrap slds-grid--align-spread" >
                                Are you sure to delete this record?
                            </div>
                        </div>
                    </div>
                    <div class="slds-modal__footer">
                        <div class="slds-button-group slds-float--right" role="group">
                            <input type="button" class="slds-button slds-button--neutral cancel" onclick="closeWindow();" value="Cancel" />
                            <input type="button" class="slds-button slds-button--brand save" onclick="deleteRelatedListRecord();" value="Confirm"  />
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-modal-backdrop slds-modal-backdrop--close"  id="idBackDrop"></div>
        </apex:form>
        <script>
            function openDeleteConfirm()
            {
                    document.getElementById("idDialog").className = document.getElementById("idDialog").className.replace( /(?:^|\s)slds-fade-in-close(?!\S)/g , ' slds-fade-in-open');
                    document.getElementById("idBackDrop").className = document.getElementById("idBackDrop").className.replace( /(?:^|\s)slds-modal-backdrop--close(?!\S)/g , ' slds-modal-backdrop--open');
            }

            function closeWindow()
            {
                    document.getElementById("idDialog").className = document.getElementById("idDialog").className.replace( /(?:^|\s)slds-fade-in-open(?!\S)/g , ' slds-fade-in-close');
                    document.getElementById("idBackDrop").className = document.getElementById("idBackDrop").className.replace( /(?:^|\s)slds-modal-backdrop--open(?!\S)/g , ' slds-modal-backdrop--close');
            }

       </script>
    </html>
</apex:page>
Improve this answer
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .