+ Start a Discussion
YiQin HeYiQin He 

How to close lightning quick action modal dialog

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.
User-added image

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.
Best Answer chosen by YiQin He
YiQin HeYiQin He
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

All Answers

karthikeyan perumalkarthikeyan perumal
Hello 

Try Below Code: 
 
<aura:component controller="ContactController" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >
    <style>
        .changeRecordTypeRow {
        margin-top: 1.5rem;
        margin-bottom: 0;
        margin-left: 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 aura:id="MainDiv" class="slds-modal__container">
    <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" Press={!c.removeCSS} >
            	Cancel
            </button>
            <button type="button" class="slds-button slds-button--brand" aura:id="btnSave">
            	Save
            </button>
        </div>
    </div>
  </div>
</aura:component>

in Controller add Below Method

removeCSS: function(cmp, event) {
        var cmpTarget = cmp.find('MainDiv');
        $A.util.removeClass(cmpTarget, 'slds-modal__container');
    }

Hope it will help you. 

Thanks
Karthik 
 
YiQin HeYiQin He
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
This was selected as the best answer
Tech ModTech Mod
List of all the best websites (https://codertrick1.blogspot.com/) on the internet. 1. Technology (https://www.techrado.com) Techrado is the latest tech and new site for multi niche. 2. Techmod (https://techmod.org) Techmod provides review about different products. 3. Techpend (https://techpend.com) Techpend is the biggest and best alternative to these sites. 4. Auto Insurance Quotes (https://autoinsurancequotes.pro/) Auto Insurance Quotes is the best site for insurance quotes.
Ladle BhaiLadle Bhai
mark khanmark khan
Thanks for the post. 
Here the list of top Movies and TV Shows APK
https://apkpureapp.com/
https://www.livenettv.vip/​​​​​​​ (https://www.livenettv.vip/)
https://tvzion.me/​​​​​​​ (https://tvzion.me/)
http://typhoontv.me/​​​​​​​ (http://typhoontv.me/)
http://www.theaterplus.me/​​​​​​​ (http://www.theaterplus.me/)
mark khanmark khan
Download Yowhatsapp Apk which is similar to official Whatsapp but yowhatsapp has some extra features which is not in Official.
You can Visit fir More Info :- YoWhatsapp 8.12 (http://yowhatsapp.info/)
apk duniyaapk duniya
This is the best website for free apk download (https://apkduniya.com)