What is the best way to display a popup message just one time?

There seems to be an issue with my pop-up displaying to website visitors even after they have closed it or subscribed previously.

How can I modify the code below to ensure the pop-up is only shown once?

setTimeout(function(){
        var newsletterModal = $('#newsletterModal');
        if (newsletterModal.length && typeof $.cookie('newsletter_modal') === 'undefined') {
            if ($.cookie('age_verified') || !$('#verifyAgeModal').length) {
                newsletterModal.foundation('open');
                $.cookie('newsletter_modal', true, { path: '/' });
            }
            else {
                verifyAgeModal.on('closed.zf.reveal', function() {
                    newsletterModal.foundation('open');
                    $.cookie('newsletter_modal', true, { path: '/' });
                });
            }
        }
    }, 20000);

I currently do not use the age verification feature and have kept it in place for potential future use.

Additionally, I am interested in distinguishing between users who have closed the pop-up and those who have subscribed, so that I can re-display the pop-up to non-subscribers after a certain period of time. Is there a way to achieve this distinction?

Answer №1

One method to achieve this is by integrating ajax functionality to store the dialog box's status in the database. When the close button is clicked, trigger an ajax call to update the view status as completed or 1. Subsequently, during the next load, validate the view status before displaying the modal.

To track the user who accessed the dialog box, store a unique identifier in the browser's cookies. This identifier can then be utilized to track user interactions and log events within the browser.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to incorporate paginating in MongoDB operations

It's a well-known fact that using skip for pagination can lead to performance issues, especially as the data set grows larger. One workaround is to leverage natural ordering using the _id field: //Page 1 db.users.find().limit(pageSize); //Get the id ...

What is the best way to retrieve a value from a database and display it in a radio

Can you help me figure out how to implement this functionality? I have a database with a "boolean" field that stores 0 or 1 values. On an HTML page, there is a radioButton with options for OK or NO. I need to dynamically load the boolean value from the dat ...

What is the best way to integrate urql data into React similar to redux?

Currently, I am utilizing urql for making GraphQL API calls in one of our projects. In projects where we are working with RESTful APIs, I typically rely on redux to manage re-renders whenever there are changes in the data. Given my limited experience with ...

Unable to replicate the exact Bootstrap template found on their website

Attempting to replicate a template from bootstrap.com, but encountering issues with the copied version. The navigation bar is turning white instead of remaining black, and I'm unable to change the color. Additionally, facing problems with the toggle ...

Create an array by copying elements from another array object

My goal is to merge the data from two arrays, array1 and array2, into a new array called array3. Here's how I want it structured: array 1 objects: userName, userId array 2 objects: userId, msg I aim to obtain an array3 consisting of: userId, userNa ...

Is it possible to include two AJAX requests within a single function that both execute when the same submission occurs?

Having one submit button for a function necessitates the running of two ajax functions when the submit button is clicked for validation purposes. <div class="form-group btn-group"> <input type="button" class="btn btn-link" v ...

Methods for passing JavaScript variables to PHP

I have encountered this problem on Stack Overflow before, but I couldn't find a solution that worked for me. I am using Codeigniter and have a form where users can rate a product. What I need to achieve is to insert the user's rating into the dat ...

Displaying child properties in a functional ReactJS component

React version 0.14 introduces the concept of pure functional components, ensuring that the same input always results in the same output. Props are passed as function arguments. // Using ES6 arrow functions with implicit return: const PureComponent = ({url ...

Is it possible to showcase text from a text file formatted in HTML?

Is there a way to showcase the content and HTML tags from content.txt as traditional HTML on a web page? ...

Guide to accessing child prop reference in Vue 3 using Element Plus UI library

I am encountering an issue with a dropdown component labeled 'dropdown' When selecting an item, I need to retrieve the selected label (not just the value) Currently, when using dropdown.value, I receive an object containing a key and its corres ...

Showing an array of detailed high-quality images on an HTML canvas with map tiling

My project involves using three.js to showcase a globe. Initially, the image quality is low, but as the user zooms in, the images become clearer and higher in quality. This is achieved through the use of tiling. Each tile measures 256px x 256px. For the lo ...

Flick user media cards left or right to uncover the following one

I am currently working on creating a widget that will display user media objects in a horizontal layout using ng-repeat. The goal is to allow users to swipe left or right to reveal the next media card, similar to the image shown below. In the example, you ...

Having trouble retrieving JavaScript variables within ColdFusion tags in a script

While working on my project, I encountered an issue with passing a selected value from a select tag to cold fusion tags using jQuery. Below is the code snippet: Select Tag Code: <select id="selectco"> <cfoutput query="colist"> <option valu ...

Utilize vue-resource for updating information in the database

Within my Vue component, I have the following data setup: data() { return { revenueChart: '', limit: 12, labels: '', datasets: '' } }, In addition, there is a method that utilizes vue- ...

If any modifications are made to the database, the script will re-execute

Is there a way to make my script only automatically execute again if the database undergoes changes? Currently, it runs continuously based on the variable timer and setInterval, updating the output of the textboxes whenever I alter the database value witho ...

Identify the descendant of the `<li>` tag

I need help creating a interactive checklist. The idea is that when you click on an item in the list, a hidden child element should become visible. <div id="list_one"> <h2>LIST TITLE</h2> <div id="line"></div> < ...

Determine if arrays and DOM elements have matching IDs

I am attempting to compare two arrays in order to determine if the same ID exists in both the array and the elements within a UL that I am comparing them to. My approach involves simplifying incoming data (from an AJAX call success) into an array of IDs a ...

Generate a record with a valid timestamp - Mongoose

My goal is to input a date field in a MongoDB document. However, when I send the POST request to the API, the time in the created document differs from what I specified. Here is an example: { "serialnumber": "1234567", "date": "2019-08-30T10:32" } The re ...

Prevent Node.js Express from automatically creating sessions

When I activate the session option in express using app.use(express.session({secret: "12345"}));, a session cookie is automatically created when the user visits a page for the first time. Is there a way to turn off this automatic behavior and have more co ...

I'm struggling to recreate basic JavaScript code with an Angular directive

I created a basic widget/snippet that replaces empty stars with filled stars upon hover. When the mouse moves away, it reverts to the default number of stars, and when clicked, it changes the default value based on the star clicked. While it's a strai ...