<aura:component controller="VerificationFilesController" Implements="flexipage:availableForRecordHome,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    <aura:attribute name="recordError" type="String" access="private"/>
<aura:attribute name="isMultiSelectOpen" type="boolean" />
    <aura:attribute name="options" type="List" default="[]"/>
    <aura:attribute name="values" type="List" default="[]"/>
<lightning:button variant="brand" label="Request for Additional Documents" title="Request for Additional Documents" onclick="{!c.openMultiSelectModel}"/>
    <aura:if isTrue="{!v.isMultiSelectOpen}">
        <!--###### MODAL BOX Start From Here ######--> 
        <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
            <div class="slds-modal__container">
                <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
                <div class="slds-modal__header">
                    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeReviewer}">
                        X
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="header99" class="slds-text-heading--medium">Review Document</h2>
                </div>
                <!--###### MODAL BOX BODY Part Start From Here ######-->
                <div class="slds-modal__content slds-p-around--medium  slds-is-relative slds-scrollable">
                    <aura:if isTrue="{!v.showSpinner}">
                        <div class="demo-only" style="height:6rem;">
                            <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
                                <span class="slds-assistive-text">Loading</span>
                                <div class="slds-spinner__dot-a"></div>
                                <div class="slds-spinner__dot-b"></div>
                            </div>
                        </div>
                        <aura:set attribute="else">
                            <div class="slds-form-element slds-p-around--medium">

        <lightning:dualListbox aura:id="selectOptions"
                                               name="multipleOptions"  
                                               label= "Select Options" 
                                               sourceLabel="Available Options" 
                                               selectedLabel="Selected Options" 
                                               options="{!v.options}" 
                                               value="{!v.values}" 
                                               onchange="{!c.handleChange}"/>     
 </div>
                        </aura:set>
                    </aura:if>
                </div>
                    <button class="slds-button slds-button--neutral" onclick="{!c.closeReviewer}" >Cancel</button>
                </div>
            </div>
        </div>
        <div class="slds-backdrop slds-backdrop--open"></div>
        <!--###### MODAL BOX Part END Here ######-->
        

    </aura:if>

({
    doInit: function(component, event, helper) {         
        var action1 = component.get('c.getTypeWiseDocuments');
        //var typewisedocument = component.find("selectOptions");
        action1.setCallback(this, function(response1) {
            var state = response1.getState();
            if (component.isValid() && state == 'SUCCESS') { 
            var documents = response1.getReturnValue();
            var options = [];
            documents.forEach(function(document)  { 
                    console.log(document);
                    options.push({ value: document.Document_Name__c, label: document.Document_Name__c});
                });
                component.set("v.options", options);
                component.get("v.values");
                alert(JSON.stringify(component.get("v.options")));
            } else {
                console.log('Failed with state: ' + state);
            }
         });
        $A.enqueueAction(action1);
        
    },
handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
      
         var selectedOptionValue =event.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue.toString() + "'");         
    },
     openMultiSelectModel: function(component, event, helper) {
        // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
        component.set("v.isMultiSelectOpen", true);
        alert(component.get("v.isMultiSelectOpen"));
    },
    closeMultiSelectModel : function(component, event, helper) {
        component.set("v.isMultiSelectOpen", false);
    }
})

public class VerificationFilesController {
@AuraEnabled
    public static List<TypeWiseDocument__c> getTypeWiseDocuments(){
        system.debug('getTypeWiseDocuments Controller');
        List<TypeWiseDocument__c> twList = [SELECT  ID,Document_Name__c FROM TypeWiseDocument__c where DocumentType__c = 'Additional'];
        return twList;        
    }
}

 

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.


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.