不再显示此复选框

时间:2019-05-02 13:21:53

标签: checkbox controller salesforce salesforce-lightning

所有人。

我是Salesforce的初学者,并且需要有关此代码的帮助。我想要这个“不再显示此复选框”使模式停止显示,而不是处理程序doInit。我以为只能更改组件上的功能位置,但是不起作用。你们中的任何一个都可以帮助我逐步实现这一目标吗?感谢您的宝贵时间和耐心等待。这是我的代码:

组件

<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="slds-m-around_xx-large" >

        <!--Use aura:if tag to display/hide popup based on isModalOpen value-->  
        <aura:if isTrue="{!v.isModalOpen}">

            <!-- Modal/Popup Box starts here-->
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal sl``ds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- Modal/Popup Box Header Starts here-->
                    <header class="slds-modal__header" style="border-bottom: none; padding: 0">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1" style="overflow: hidden">
                        <img src="/resource/1556211422000/polybday26" alt="Aniversario Polyorganic" />
                    </div>

                    <!--Modal/Popup Box Footer Starts here-->
                    <footer class="slds-modal__footer">
                        <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>
                        <lightning:button variant="brand"
                                          label="OK"
                                          title="OK"
                                          onclick="{!c.submitDetails}"/>
                    </footer>
                </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);
   },

   submitDetails: function(component, event, helper) {
      // Set isModalOpen attribute to false
      //Add your code to call apex method or do some processing
      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;
}

最诚挚的问候,

Camila

0 个答案:

没有答案