1

I have a detail page button on one of my custom objects. The content source is Visualforce Page. In this org, Lightning Experience is being used. After user clicks this button I want to appear lightning styled modal. For example, when I'm on record page, I have button New Opportunity. I click it and the modal appears - in the background I still can see record's details. And when I click my button the modal appear but it has grey background behind. From documentation I read that .slds-modal-backdrop creates the shaded backdrop used behind the modal. I don't know how to achieve background like with New Opportunity modal. Here's the code of VF page:

<div class="slds">
    <div class="slds-modal slds-fade-in-open" aria-hidden="false" role="dialog" id="modal">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading--medium">My Header</h2>
            </div>

            <div class="slds-modal__content slds-p-around--medium">
                <div class="slds-form--horizontal">

                // my code goes here...

                </div>
            </div>

            <div class="slds-modal__footer"></div>

        </div>
    </div>
    <div class="slds-backdrop slds-backdrop--open" id="backdrop"></div>
</div>
2

Here is the proper way to use modal in salesforce lightning component

in component

<lightning:button label="Open Modal" onclick="{!c.openModal}" />
<div role="dialog" tabindex="-1" aura:id="myModal" aria-labelledby="header43" class="slds-modal ">
    <div class="slds-modal__container">
        <div class="slds-modal__header">
            <h2 id="header43" class="slds-text-heading--medium">CONFIRM</h2>
        </div>
        <div class="slds-modal__content slds-p-around--medium">
            <center><h2>Are you sure you want to delete this?</h2></center>
        </div>
        <div class="slds-modal__footer">
            <lightning:button label="Cancel" onclick="{!c.closeModal}"/>
            <lightning:button variant="brand" label="Delete" />
        </div>
    </div>
</div>
<div class="slds-backdrop " aura:id="myModal-Back"></div>

In Controller

 openModal : function(component, event, helper) {
   //find modal using aura id
    var modal = component.find("myModal");
    var modalBackdrop = component.find("myModal-Back");

   // Now add and remove class
    $A.util.addClass(modal, 'slds-fade-in-open');
    $A.util.addClass(modalBackdrop, 'slds-fade-in-open');
}

closeModal : function(component, event, helper) {
   //find modal using aura id
    var modal = component.find("myModal");
    var modalBackdrop = component.find("myModal-Back");

   // Now add and remove class
    $A.util.removeClass(modal, 'slds-fade-in-open');
    $A.util.removeClass(modalBackdrop, 'slds-fade-in-open');
}
0

In your component's CSS file:

.THIS .slds-backdrop {
    background-color: blue;
}

modal with opaque background

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.