Lightning modal without shaded backdrop behind

Question

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>

Answer 1

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');
}

Answer 2

In your component's CSS file:

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