[SalesForce] Salesforce Lightning Design System Modals

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.

Best Answer

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!

Related Topic