+ Start a Discussion
MaheemSamMaheemSam 

Pop page when user login in mobile

Hi, 
 
 In below code popup alert is displayed in home page for first time only when user login 

 Below code is working perfect in lightning in salesforce I want to make it work in mobile app as well please suggest me how to implement this feature. 


  Aura Component:
<aura:component 
               implements="flexipage:availableForAllPageTypes"
                access="global">
    <aura:handler name='init' action="{!c.init}" value="{!this}" />
    <aura:attribute name="isOpen" type="boolean" default="false" />
    <div class="slds-backdrop" aura:id="Modalbackdrop"></div>
    <aura:if isTrue="{!v.isOpen}">
        <div role="dialog" tabindex="-1" aria-labelledby="header43" class='pop-up slds-modal' aura:id="popupDiv1">
            <div class="slds-modal__container">
                <div class="slds-modal__pinner">
                    <div class="message">
                        <p>You logged into salesforce Lightning </p>                    
                    </div>
                    <div class="slds-form-element">
                        <lightning:button variant="success" label="Ok" title="ok" onclick="{! c.close }" />
                        
                    </div>
                </div>
            </div>
        </div>
    </aura:if>
</aura:component>
JS Controller:
({
    init : function(component, event, helper) {
        var temperorySession = localStorage.getItem('tempSession');
        if(temperorySession == '1')
        {  
            component.set("v.isOpen", false);
        }
        else
        {
            component.set("v.isOpen", true);
            var cmpTarget1 = component.find('popupDiv1');
            var cmpBack1 = component.find('Modalbackdrop1');
            $A.util.addClass(cmpTarget1, 'slds-fade-in-open');
            $A.util.addClass(cmpBack1, 'slds-backdrop--open');
        }
        localStorage.setItem('tempSession', '1');
        
    },
    close: function(component, event, helper) {
        component.set("v.isOpen", false);
    }
})

STYLE:
.THIS.pop-up {
    display: block;
    opacity: 1;
    visibility: visible;
}

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

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