PD_FlexiPage_LightningPopUpModal_Button.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
	<ui:button label="lightning-fexi-component-button" press="{!c.openmodal}"  /> 
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal slds-modal_large">
        <div class="slds-modal__container" style="width: 95%;">
            <div class="slds-modal__header">
                
            </div>
            <div class="slds-modal__content slds-p-around--medium"> 
                <div>
                    <c:training_component /> <!-- Some Content for the Modal pop -->
                </div>
            </div>
            <div class="slds-modal__footer">
                <ui:button label="close" press="{!c.closeModal}"  />
            </div>
        </div>
    </div>
    <div class="slds-backdrop " aura:id="Modalbackdrop"></div>
</aura:component>

PD_FlexiPage_LightningPopUpModal_Button.js

({
	closeModal:function(component,event,helper){    
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open'); 
    },
    openmodal: function(component,event,helper) {
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open'); 
    }
})