Display lightning form in modal after clicking on standard new button of contact

Question

I am trying to display below lightning form in modal popup using overlay library. Please let me know how to do. I have overrided below form with Contact New button.

<aura:component implements="force:appHostable,lightning:actionOverride" access="global" >
<aura:attribute name="recordId" type="String">
<lightning:overlayLibrary aura:id="popuplib"/>
<div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
    <lightning:recordEditForm objectApiName="Contact" onsuccess="{!c.handleSuccess}">
        <lightning:messages />
        <lightning:inputField fieldName="FirstName" />
        <lightning:inputField fieldName="LastName" />
        <lightning:inputField fieldName="Birthdate" />
        <lightning:inputField fieldName="Phone" />
        <lightning:button aura:id="submit" type="submit" label="Save record" class="slds-m-top_medium" />
        </lightning:recordEditForm>
</div>  

Client side controller:

({
    handleSuccess : function(component, event, helper) {

        var contactRec = event.getParams().response;
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
           "recordId": contactRec.id,
           "slideDevName": "related"
       });

       navEvt.fire();
    }  
})

Answer 1

Update:-I have updated my whole answer and implemented the @Lightning problem in my org

Some key points:-

• Header – The title of the modal
• Body – Main content of the Modal

This component will call your component in modal box:-

overlaylibrary.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<lightning:overlayLibrary aura:id="overlayLib"/>
<aura:handler name='init' action="{!c.init}" value="{!this}" />

Controller:- Here, i am creating the content Of the modal

({
init : function(component, event, helper) {
     var modalBody;
    var modalFooter;
    $A.createComponents([
        ["c:loadingrecord",{}]
    ],
                        function(components, status){
                            if (status === "SUCCESS") {
                                modalBody = components[0];
                                component.find('overlayLib').showCustomModal({
                                    header: "My Modal",
                                    body: modalBody,
                                    showCloseButton: true,
                                    cssClass: "my-modal,my-custom-class,my-other-class",
                                    closeCallback: function() {

                                    }
                                });
                            }
                        }
                       );


    }
})

Now, this is your component where have created the form. This component is called in modal as content of the modal.

loadingrecord.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction"
                access="global" >


    <aura:attribute name="recordId" type="String"/>

    <lightning:recordEditForm objectApiName="Contact" onsuccess="{!c.handleSuccess}">
        <lightning:messages />
        <lightning:inputField fieldName="FirstName" />
        <lightning:inputField fieldName="LastName" />
        <lightning:inputField fieldName="Birthdate" />
        <lightning:inputField fieldName="Phone" />
        <lightning:button aura:id="submit" type="submit" label="Save record" class="slds-m-top_medium" />
    </lightning:recordEditForm>

</aura:component>

Controller:-

({
handleSuccess : function(component, event, helper) {

    var contactRec = event.getParams().response;
    var navEvt = $A.get("e.force:navigateToSObject");
    navEvt.setParams({
       "recordId": contactRec.id,
       "slideDevName": "related"
   });

       navEvt.fire();
    }  
})

Now see, what i have done. Override your component with the first Component where you have define lightning:overlayLibrary.

Hope it helps you.