Here is my code for modal:
component code:
<div aria-modal="true" role="dialog" tabindex="-1" aura:id="myModal" class="slds-modal">
<div class="slds-modal__container" >
<div class="slds-modal__content slds-is-relative">
<div>
<!--
my form goes in here
-->
</div>
</div>
</div>
</div>
<div class="slds-backdrop" aura:id="myModalBackground"></div>
JS controller:
openmodal: function(component,event,helper) {
var cmpTarget = component.find('myModal');
var cmpBack = component.find('myModalBackground');
$A.util.addClass(cmpTarget, 'slds-fade-in-open');
$A.util.addClass(cmpBack, 'slds-backdrop--open');
//hide scroll bars
document.body.style.overflowX = 'hidden';
document.body.style.overflowY = 'hidden';
},
Modal opens great and works well. However, I'm not able to disable the background. I can tab in and out of modal to the background. Is there a way to disable background when modal is open?