Showing Modals in lightning components using lightning:overlayLibrary

Open Modals in Lightning Components

c:ModalWindow

<aura:component implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global">
    <aura:attribute name="myVal" type="String" />
    <!-- This line to show modal window from controller --> 
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <div class="slds-page-header slds-col slds-has-flexi-truncate slds-media__body">
        <div class="slds-grid slds-grid_pull-padded-medium">
            <div class="slds-col slds-p-horizontal_medium">
                <lightning:input label="Name" placeholder="Enter name" name="myname" value="{!v.myVal}" required="true" />
                <div class="slds-align_absolute-center">
                    <lightning:button name="modal" class="MyBtn" label="Show Modal" onclick="{!c.handleShowModal}"/>
                </div>
            </div>
            <div class="slds-col slds-p-horizontal_medium"></div>
        </div>
    </div>
</aura:component>



ModalWindowController.js

({
    handleShowModal : function (component, event, helper) {
        var myName= component.get("v.myVal");
        var modalBody;
        $A.createComponent("c:modalContent", {"nameParent":myName},
                           function(content, status) {
                               if (status === "SUCCESS") {
                                   modalBody = content;
                                   component.find('overlayLib').showCustomModal({
                                       header: "Entered Details",
                                       body: modalBody,
                                       showCloseButton: true,
                                       cssClass: "mymodal",
                                       closeCallback: function() {
                                           console.log('You closed the alert!');
                                       }
                                   })
                               }
                           });
    },
})


ModalWindow.css

.THIS .MyBtn{
    margin-top:10px;
}


c:modalContent


<aura:component access="global">
    <aura:attribute name="nameParent" type="String" />
    <!-- This is the reference of Modal window -->
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <div class="demo-only demo-only--sizing slds-grid slds-wrap">
        <div class="slds-size_8-of-12">
            <div class="slds-text-align_left slds-m-around_x-small slds-p-left_large slds-p-right_large ">
                <h1 class="slds-page-header__title slds-align-middle">{!v.nameParent}</h1>
            </div>            
            <div class="slds-align_absolute-center">
                <lightning:button label="Close" onclick="{!c.handleClose}" variant="brand" class="slds-m-top--medium"/>
            </div>
        </div>
    </div>
    
</aura:component>


modalContentController.js

({
	handleClose : function(component, event, helper) {
        //Closing the Modal Window
         component.find("overlayLib").notifyClose();
		
	},
})

Thanks for documenting this process, this was really helpful and easy to run with!

I am using same pattern, however, I am struggling to override the style width from slds-modal__container. You have to do it with JS but Dom elements are never retrievable in order to set the parent cComponent class name that come from .THIS in css.