How to close modal dialog in Lighting component ?

 Lightning Web Components

Lightning Web Components are supported in Quick Action after 21, Here is the code to close popup.

First Import library 

import { CloseActionScreenEvent } from 'lightning/actions';

Dispatch event when we want to close popup

this.dispatchEvent(new CloseActionScreenEvent());

XML code

<targets>

  <target>lightning__RecordAction</target>

</targets>

<targetConfigs>

  <targetConfig targets="lightning__RecordAction">

    <actionType>ScreenAction</actionType>

  </targetConfig>

</targetConfigs>

Lightning Aura Components

It is very easy to close aura modal, we need

$A.get("e.force:closeQuickAction").fire();

Here is controller code 

({

closeMethodInAuraController : function(component, event, helper) {

$A.get("e.force:closeQuickAction").fire();

}

})

Lightning Aura Components + Lightning LWC Components

When LWC component is wrapped inside aura component.

1. Dispatch an event from LWC component

 const closeQA = new CustomEvent('close');

        // Dispatches the event.

        this.dispatchEvent(closeQA);

2. Have Listener defined in Aura to close popup. 

<c:lwcComponent onclose="{!c.closeMethodInAuraController}" recordId="{!v.recordId}"/>

Aura Component 

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">

    <aura:html tag="style">

.cuf-content {

  padding: 0 0rem !important;

}

.slds-p-around--medium {

  padding: 0rem !important;

}

.slds-modal__content{

  overflow-y:hidden !important;

  height:unset !important;

  max-height:unset !important;

}

</aura:html>

    <c:cloneLead onclose="{!c.closeMethodInAuraController}" recordId="{!v.recordId}"/>

</aura:component>

Controller

({ closeMethodInAuraController : function(component, event, helper) { $A.get("e.force:closeQuickAction").fire(); } })

 <aura:html> code just make background style.