You need to sign in to do that
Don't have an account?
Kapil Devre
How to show pop up window only once for the first time when user visits the website in lightning component?
I have written a Lightning Component of Modal Popup to show popup in home page of public community website , it will be shown whenever user visits the website.
My requirement is here is popup window should show only once when the user visits the website for the first time.
But the issue is , whenever the user visits to the website or other sub pages of the site and come back to the home page, again the popup appears.
In this we want to set the modal popup should be shown only for the first time when the users visit the site ,
as in the popup we are just making sure the user is aware of GDPR rules and regulations .
Once, the user clicks on OK, everytime the GDPR popup should not get open when the user visits the site and home page.
I have refered many Javascript examples but unfortunately I am not able to figure it out , please find my following code and suggest me.
Component :
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="isModalOpen" type="boolean" default="true"/>
<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 slds-fade-in-open">
<div class="slds-modal__container">
<!-- Modal/Popup Box Header Starts here-->
<header class="slds-modal__content slds-p-around_medium">
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"><b>About Your Privacy</b></h2>
</header>
<!--Modal/Popup Box Body Starts here-->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p>This website uses cookies to improve performance and enhance our visitors’ experience.You may view our privacy policy here.
</p>
</div>
<!--Modal/Popup Box Footer Starts here - class="slds-modal__header", class="slds-modal__footer"-->
<footer class="slds-modal__content slds-p-around_medium">
<lightning:button
label="OK"
title="OK"
onclick="{!c.submitDetails}"/>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
</div>
</aura:component>
Controller :
({
openModel: function(component, event, helper) {
// Set isModalOpen attribute to true
component.set("v.isModalOpen", true);
},
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);
},
})
My requirement is here is popup window should show only once when the user visits the website for the first time.
But the issue is , whenever the user visits to the website or other sub pages of the site and come back to the home page, again the popup appears.
In this we want to set the modal popup should be shown only for the first time when the users visit the site ,
as in the popup we are just making sure the user is aware of GDPR rules and regulations .
Once, the user clicks on OK, everytime the GDPR popup should not get open when the user visits the site and home page.
I have refered many Javascript examples but unfortunately I am not able to figure it out , please find my following code and suggest me.
Component :
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="isModalOpen" type="boolean" default="true"/>
<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 slds-fade-in-open">
<div class="slds-modal__container">
<!-- Modal/Popup Box Header Starts here-->
<header class="slds-modal__content slds-p-around_medium">
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"><b>About Your Privacy</b></h2>
</header>
<!--Modal/Popup Box Body Starts here-->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p>This website uses cookies to improve performance and enhance our visitors’ experience.You may view our privacy policy here.
</p>
</div>
<!--Modal/Popup Box Footer Starts here - class="slds-modal__header", class="slds-modal__footer"-->
<footer class="slds-modal__content slds-p-around_medium">
<lightning:button
label="OK"
title="OK"
onclick="{!c.submitDetails}"/>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
</div>
</aura:component>
Controller :
({
openModel: function(component, event, helper) {
// Set isModalOpen attribute to true
component.set("v.isModalOpen", true);
},
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);
},
})
You have to do this
This is only possible with database or custom field.
1. Create a check box in the user object and set Default false.
2. when user logged in then you can set this check box to TRUE in doInit() funtion.
3. this will set true for this user sothat this user will not able to see the popup box again.
Please MARK as a best ansewer if you got resolved your issue.
Regards
Mukesh
I want to set the Popup box only for once per user , for the public community website and not for Login Authenticated users.
Thanks and Regards,
Kapil
Hi @Kapil Devre,
Did you solve it ? Let me know if possible as I'm also facing something similar
If this information helps, please mark the answer as best. Thank you