function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
YukinonYukinon 

Modal not opening

My modal is not opening. Anyone knows why?

Component
<aura:component controller="CaseCreationController" implements="flexipage:availableForAllPageTypes" access="global">
  	<aura:attribute name="caseType" type="List" />
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
     <lightning:card>
        <div class="slds-p-around_medium slds-grid">
            <aura:iteration items="{!v.caseType}" var="cs">
            <lightning:button variant="brand-outline" label="{!cs}" onclick="{!c.openModal}" name="{!cs}" value="{!cs}" />
   		 </aura:iteration> 
        </div>
   	</lightning:card>
    <aura:if isTrue="{!v.isOpen}">
        <section role="dialog" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <div class="slds-modal__content slds-p-around--medium">
                	 <ui:inputText class="form-control" value="Test"/>
                </div>
            </div>
        </section>
    </aura:if>
</aura:component>
ControllerJS
openModal : function (cmp, event, helper) {
   		component.set("v.isOpen", true);
    }


 
Best Answer chosen by Yukinon
Sai PraveenSai Praveen (Salesforce Developers) 
Hi,

Can you check the below example for the modal opening and closing . The code which you shared is missing the init function ..etc

https://www.sfdcpoint.com/salesforce/modal-popup-lightning-component-salesforce/

If this solution helps, Please mark it as best answer.

 

All Answers

Sai PraveenSai Praveen (Salesforce Developers) 
Hi,

Can you check the below example for the modal opening and closing . The code which you shared is missing the init function ..etc

https://www.sfdcpoint.com/salesforce/modal-popup-lightning-component-salesforce/

If this solution helps, Please mark it as best answer.

 
This was selected as the best answer
mukesh guptamukesh gupta
Hi Yukinon,

Please use below code:-
 
<aura:component controller="CaseCreationController" implements="flexipage:availableForAllPageTypes" access="global">
  	<aura:attribute name="caseType" type="List" />
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
     <lightning:card>
        <div class="slds-p-around_medium slds-grid">
            <aura:iteration items="{!v.caseType}" var="cs">
            <lightning:button variant="brand-outline" label="{!cs}" onclick="{!c.openModal}" name="{!cs}" value="{!cs}" />
   		 </aura:iteration> 
        </div>
   	</lightning:card>
    <aura:if isTrue="{!v.isOpen}">
        <section role="dialog" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <div class="slds-modal__content slds-p-around--medium">
                	 <ui:inputText class="form-control" value="Test"/>
                </div>
            </div>
        </section>
       <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
</aura:component>

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh