<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="PopupMessageController">  
    <aura:attribute name="ListOfMessage" type="Popup_Message__c[]" description="displayes list of messages"/>
    <aura:handler name='init' action="{!c.doInit}" value="{!this}" /> 
    <aura:attribute name="isOpen" type="boolean" default="False" />
    
    <aura:if isTrue="{!and(v.isOpen,v.ListOfMessage != null)}"> 
         
    <div class="slds-backdrop" aura:id="Modalbackdrop"></div>         
        <div role="dialog" 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>Sudhir First </p> -->                         
                        <ul>
      					<aura:iteration items="{!v.ListOfMessage}" var="msg">
                            <li type="dice" style="margin: 0;padding: 0.2em;display: inline-block;">{!msg.Message_Text__c}</li>
  						 <hr/>
      					</aura:iteration>
   						</ul>
                     </div>                                           
                    <div class="slds-form-element">
                        <lightning:button variant="success" label="Ok" title="ok" onclick="{!c.close }" class="OKButton button4"/>
                    </div>
                </div>                    
            </div>
            
        </div>   
        <aura:set attribute="else">
             <div> 
            </div> 
        </aura:set>
   </aura:if> 
</aura:component>

({
    doInit : function(component, event, helper) {
        var action = component.get('c.fetchMessage',true);
        action.setCallback(this, function(response) {
        //store state of response
        var state = response.getState();
        if (state === "SUCCESS") {
         //set response value in ListOfMessage attribute on component.
         component.set('v.ListOfMessage', response.getReturnValue());
         }
       });
        $A.enqueueAction(action); 
        var temperorySession = localStorage.getItem('tempSession');
        if(temperorySession == '1')
        {  
            component.set("v.isOpen", true); //This should be set to false to testing set to true
        }
        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');
            $A.enqueueAction(action); 
        }
        localStorage.setItem('tempSession', '1');
        
    },
    close: function(component, event, helper) {
        component.set("v.isOpen", false);
    }
})

.THIS.pop-up {
    display: block;
    opacity: 1;
    visibility: visible;
    overflow: auto;
    background-color:#000;
}

.THIS .slds-modal__inner {
    padding: 10px;
    text-align:left;
    overflow-y: scroll;
}

.THIS .slds-modal__pinner {
    background: #fff;
    padding: 10px;
    font-size: 12px; 
    font-weight: bold;
    overflow-y: scroll;
}
.THIS .OKButton{
   -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #91989c;
  padding: 6px 15px 9px 13px;
  text-decoration: none;
}
.THIS .OKButton:hover {
  background: #5c575c;
  text-decoration: none;
}