Hi, everyone.

I'm a Salesforce beginner and I need help with this code. I want to this "Don't show this again checkbox" makes the modal to stop showing up instead of the handler doInit. I thought that I could only change the function position on the component, but it doesn't work. Can any of you help me step by step to make this works, please? I appreciate your time and patience. Here is my code:

Component

<aura:component implements="flexipage:availableForAllPageTypes"
                access="global">
    
<!--<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>-->
<aura:attribute name="isModalOpen" type="boolean" default="false"/> 
    
	<div class="demo-only">
        <!--Use aura:if tag to display/hide popup based on isModalOpen value-->  
        <aura:if isTrue="{!v.isModalOpen}">
  <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="welcome-mat-95-label" aria-describedby="welcome-mat-95-content" aria-modal="true">
    <div class="slds-modal__container">
      <header class="slds-modal__header slds-modal__header_empty">
        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
      </header>
      <div class="slds-modal__content" id="welcome-mat-95-content" style="overflow: hidden">
        <div class="slds-welcome-mat slds-welcome-mat_splash">
          <div class="slds-welcome-mat__content slds-grid">
            <div class="slds-welcome-mat__info slds-size_1-of-1">
              <div class="slds-welcome-mat__info-content">
                <h2 class="slds-welcome-mat__info-title" id="welcome-mat-95-label">The Lightning Experience is here!</h2>
                <div class="slds-welcome-mat__info-description slds-text-longform">
                  <p>Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.</p>
                </div>
                <div class="slds-welcome-mat__info-actions">
                  <button class="slds-button slds-button_brand">Learn More</button>
                 <div class="slds-m-top_large">
                    <div class="slds-form-element">
                      <div class="slds-form-element__control">
                        <div class="slds-checkbox">
                          <input type="checkbox" name="init" id="checkbox-8" onchange="{!c.doInit}" value="{!this}" />
                          <label class="slds-checkbox__label" for="checkbox-8">
                            <span class="slds-checkbox_faux"></span>
                            <span class="slds-form-element__label">Don&#x27;t show this again</span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div> 
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
            
  <div class="slds-backdrop slds-backdrop_open"></div>
     </aura:if>
</div>
</aura:component>

Controller

({
   doInit: function(component, event, helper) { 
 var temperorySession = sessionStorage.getItem('tempSession');
  if(temperorySession == '1')
        {  
      console.log('===== in If');
            component.set("v.isModalOpen", false);
  }
        else
        {
      console.log('===== in else');
      component.set("v.isModalOpen", true);
  }
   sessionStorage.setItem('tempSession', '1');
 },
  
   closeModel: function(component, event, helper) {
      // Set isModalOpen attribute to false  
      component.set("v.isModalOpen", false);
   },
})

Style
 

.THIS.pop-up {
    display: block;
    opacity: 1;
    visibility: visible;
    background-color: transparent;
}

.THIS .slds-modal__inner {
    background: yellow;
    padding: 20px;
    text-align:left;
}

.THIS .slds-modal__pinner {
    background: #fff;
    padding: 20px;
}

Best Regards,

Camila Camargo
Full Stack Developer