Lightning Modal disable background

Question

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?

Answer 1

There's a few ways to handle this, but I'd probably just put a focus handler on all the background elements (e.g. wrap your background components in a div, then put a focus handler on it), and if you have an open modal, refocus on the first element in your modal area.

Alternatively, if this is meant for LEX, the best you can properly do is put a handler on the last input element, wait for a key down (Tab) event, prevent its default action, and focus back on the first input element.