Skip to main content
Hi, 

I created a lightning component as a quick action button. In the component, I have a cancel button that I want it closed when user clicks.

How to close lightning quick action modal dialog

But the problem is that I cannot find any document explain how to close the modal dialog. This is the ui code:

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

<style>

.changeRecordTypeRow {

margin-top: 1.5rem;

margin-bottom: 0;

margin-left: 0;

margin-right: 0;

}

.changeRecordTypeLeftColumn {

float: left;

text-align: right;

padding-right: 1.5rem;

width: 35%;

font-size: .8125rem;

color: rgb(84, 105, 141);

}

.changeRecordTypeRightColumn {

float: right;

text-align: left;

width: 65%;

}

.modal-body

{

height:auto !important;

padding:0;

}

.forceChatterLightningComponent .bodyWrapper{height:100%;width:100%;padding:0;box-sizing:border-box}

</style>

<div class="modal-header slds-modal__header">

<h2 class="title slds-text-heading--medium" >Change Contact Type</h2>

</div>

<div class="scrollable slds-modal__content slds-p-around--medium">

<div class="changeRecordTypeRow">

<fieldset class="slds-form-element">

<div class="changeRecordTypeLeftColumn">

<legend class="form-element__legend slds-form-element__label">Select a record type</legend>

</div>

<div class="changeRecordTypeRightColumn slds-form-element__control">

<span class="slds-radio">

<input type="radio" id="radio_PrimaryContact" name="recordType" />

<label class="slds-radio__label" for="radio_PrimaryContact">

<span class="slds-radio--faux"></span>

<span class="slds-form-element__label">Primary Contact</span>

</label>

</span>

<span class="slds-radio">

<input type="radio" id="radio_SecondaryContact" name="recordType" />

<label class="slds-radio__label" for="radio_SecondaryContact">

<span class="slds-radio--faux"></span>

<span class="slds-form-element__label">Secondary Contact</span>

</label>

</span>

</div>

</fieldset>

</div>

</div>

<div class="modal-footer slds-modal__footer">

<div class="forceChangeRecordTypeFooter">

<button type="button" class="slds-button slds-button--neutral .slds-modal__close" aura:id="btnCancel" >

Cancel

</button>

<button type="button" class="slds-button slds-button--brand" aura:id="btnSave">

Save

</button>

</div>

</div>

</aura:component>

Does anyone have similar experience? Thanks in advance.

41 answers
  1. Sep 16, 2016, 3:02 AM
    Hi Karthik,

    Thanks for the reply. I've already found the solution.

    Call this method $A.get("e.force:closeQuickAction").fire() will close the modal dialog.

    Yiqin
0/9000