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>