A pop-up modal that remains closed thanks to sessionStorage

I've been working on creating a modal that pops up after a short delay, but once closed, it shouldn't appear again unless the user closes the website and starts a new session. While I have successfully designed the modal, integrating sessionStorage has proven to be challenging.

<div id="myModal" class="modal">
       <div class="modal-content">
           <div class="modal-body">
               <span class="close">&times;</span>
               <h1>This is a Placeholder Body</h1>
           </div>
       </div>
   </div>

   <script>
       var modal = document.getElementById("myModal");
       var span = document.getElementsByClassName("close")[0];

       span.onclick = function() {
         modal.style.display = "none";
       }

       window.onclick = function(event) {
         if (event.target == modal) {
            modal.style.display = "none";
         }
      }

      setTimeout(function(){
          modal.style.display = "block";
        },6000)
    </script>
javascript

Answer №1

To implement this functionality, you can utilize sessionStorage to track whether a modal has been displayed or not. By setting a flag in sessionStorage when the modal is closed, you can determine whether to show it on page load. If the flag is present, the modal will not be displayed. You can inspect the session storage using your dev tools by navigating to application>session storage. For more details on sessionStorage, refer to this resource.

      <script>
        var modal = document.getElementById("myModal");
        var span = document.getElementsByClassName("close")[0];
        
        span.onclick = function() {
        modal.style.display = "none";
        // Flag set in sessionStorage upon closing modal
        sessionStorage.setItem('modalShown', 'true');
        }
        
        window.onclick = function(event) {
        if (event.target == modal) {
           modal.style.display = "none";
           // Flag set in sessionStorage for modal closure by clicking outside
           sessionStorage.setItem('modalShown', 'true');
        }
        }
        
        // Check if modal has been shown during this session
        var modalShown = sessionStorage.getItem('modalShown');
        
        if (!modalShown) {
        setTimeout(function(){
           modal.style.display = "block";
        }, 6000);
        }
    </script>

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

What's the best way to handle the output of an HTTP request in my specific situation?

Struggling to pass http request results from parent controller to child controller... This is what I have: <div ng-controller = "parentCtrl"> <button ng-click="callApi()">click me</button> <div ng-controller = "childCtrl"& ...

javascriptangularjs

Gatsby: A guide on inserting unadulterated HTML within the head section

Is it possible to insert raw HTML into the <head></head> section of every page in a Gatsby.js project? I need to add a string of HTML for tracking purposes, including inline and external script tags, link tags, and meta tags. For example, here ...

javascripthtmlreactjsgatsbytracking

Moving ThreeJS model during animation (Retrieving model's position without callback function)

I'm in the process of creating a model that showcases the International Space Station orbiting around the Earth using threeJS. Everything is working perfectly except for updating the position of the ISS model. Currently, I have a sphere that orbits th ...

javascriptcallbackthree.jsglobal-variables

Prop type failure: The `actions` prop is specified as mandatory in the `Testing` component, however, its value is currently undefined

I am working on a project that involves creating a login form using React and Redux. Here's a snippet of my app.js: import React from 'react'; import { render } from 'react-dom'; import Input from 'react-toolbox/lib/input&apo ...

javascriptreactjsreduxreact-redux

Syntax of the Vue.js application object model

Just delving into the world of vue.js and stumbled upon this code snippet. Curious to know more about its structure. const CounterApp = { data() { return { counter: 0 } }, mounted() { setInterval(() => { this.counter++ ...

javascriptvue.js

Navigating jQuery Tabs by Linking to a Specific Tab in a Separate File

I am currently using Bootstrap 3 to develop a basic website. On the about.html page, I have set up Tabs with various content. <ul class="nav nav-tabs" id="TabSomos"> <li class="active"><a href="#somos" data-toggle="tab">About Us</a> ...

javascriptjqueryhtmltwitter-bootstraptabs

Refreshing Rails Views by Periodically Polling the Database

We are currently developing a statusboard to monitor all our external servers. Our database contains information about OS, software versions, and other details that are subject to frequent updates. To ensure real-time visibility of these changes on the web ...

javascriptjqueryruby-on-railsajaxpolling

JavaScript is proving to be uncooperative in allowing me to modify the

Despite searching through previously asked questions, I have been unable to find a solution to my issue. I am struggling with changing an image source upon clicking the image itself. The following is a snippet of my HTML code: <img id="picture1" oncli ...

javascripthtml

What causes the error message 'avoid pushing route with duplicate key' when using NavigationStateUtils in React Native?

Within my React Native + Redux project, I have set up a reducer for navigation utilizing NavigationStateUtils: import { PUSH_ROUTE, POP_ROUTE } from '../Constants/ActionTypes' import { NavigationExperimental } from 'react-native' impo ...

javascriptreact-nativereduxreactjs

develop a hidden and organized drop-down menu using the <select> tag

I am currently developing a website for a soccer league. The site includes two dropdown lists with specific criteria, where the options in the second dropdown are limited based on the selection made in the first dropdown. My goal is to initially hide cer ...

javascriptjqueryjquery-selectorshtml-selectdropdown

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

JavaScript file to run with npm start: import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import Routes from './routes'; ReactDOM.render( <R ...

javascripthtmlreactjsexpressjsx

Update the canvas box's color when you interact with it by clicking inside

I'm in the process of developing a reservation system and I'm looking to implement a feature where the color of a Canvas changes when clicked. The goal is for the color to change back to its original state when clicked again. Snippet from my res ...

javascriptphpcanvas

The error message "Data type must be consistent across all series on a single axis in Google Chart" may cause confusion

I'm struggling with an error message that appears when I try to run my Google chart. Here is the code I am using to generate the chart. function (resultVal) { var arrMain = new Array();//[]; for (var i = 0; i < resultVal.length; i++) { ...

javascriptjsonajaxchartsgoogle-visualization

The Vue.js Vuetify.js error message is saying "A mystery custom element: <v-list-item>, <v-list-item-title> - Have you properly registered the component?"

I followed the instructions from Vuetify Data Iterator Filter section I am able to use various Vuetify components like v-btn, v-card, v-data-table, v-data-iterator, and more. However, I encountered errors only with <v-list-item> and <v-list-item ...

javascriptvue.jsvuetify.js

Is there an efficient method for transferring .env data to HTML without using templating when working with nodejs and expressjs?

How can I securely make an AJAX request in my html page to Node to retrieve process.env without using templating, considering the need for passwords and keys in the future? client-side // source.html $.get( "/env", function( data ) {console.log(data) ...

javascriptajaxnode.jsexpressenvironment-variables

There was an unexpected error in angular.js while trying to work on a calendar widget based on angular-ui-calendar. The error message indicated that the argument 'fn' was expected to be a function but instead received Moment

I came across a similar topic earlier on Stack Overflow, but unfortunately, the issue wasn't resolved. So, I've decided to revisit this question and address it myself this time. In my app.js file, which is where my main module for the app is ini ...

javascriptangularjswebpackangular-calendar

NextJs only displays loading animation once

Currently, I am developing an app using Next.js and I am facing a challenge with implementing a loading animation. The animation I am attempting to incorporate consists of three bouncing balls which display correctly. When I launch the Next.js app with n ...

javascriptcssreactjsnext.js

The Javascript function is malfunctioning, unable to assign the 'onclick' property to null

Here's the code snippet I'm working with: var exit = document.getElementById("exit"); exit.onclick = function() { "use strict"; document.getElementById("fadedDiv").style.display = "none" ; }; However, when I check the console, it shows ...

javascriptonclick

Presenting information on a webpage using a URL parameter to create an unordered list

I'm looking to automatically display a specific page from an unordered list of navigation links without the user needing to interact with the page. Is there a way to accomplish this using a URL string? Any suggestions or solutions would be greatly ap ...

javascriptjquery

Can you please explain the process of retrieving the value of an item from a drop-down menu using JavaScript?

I am currently developing a basic tax calculator that requires retrieving the value of an element from a drop-down menu (specifically, the chosen state) and then adding the income tax rate for that state to a variable for future calculations. Below is the ...

javascriptjqueryhtmlforms