Popup Modal onload fires and then when closed will not fire again for minimum of 30 minutes?

luismoya89 · November 22, 2022, 10:45pm

index:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" type='text/css' href="style.css">
</head>
<body>

    <button id="modal-btn" class="button">Click Here</button>

  <div id="my-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
      </div>
      <div class="modal-body">
        <p>This is my modal</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla repellendus nisi, sunt consectetur ipsa velit
          repudiandae aperiam modi quisquam nihil nam asperiores doloremque mollitia dolor deleniti quibusdam nemo
          commodi ab.</p>
      </div>
      <div class="modal-footer">
        <h3>Modal Footer</h3>
      </div>
    </div>
  </div>
    <!-- 
        <div class="overlay">
            <button class="close" onclick="">&times;</button>
            <div class="row center" id='x-mas-parade' style="padding:2em;">
                <div class="col-sm-12 " style="padding:1em 0;">
                    <img class="image-fluid" src="/XmasParade.jpg" alt="">
                    <div class='row'style="padding:1em 0;">
                        <div class='col-sm-12'>
                            <h4><a style='background-color:#82a742; color:#000; padding:5px 10px; border-radius:5px;margin:0 1em;' href='https://form.jotform.com/222754519816160' target='_blank'>Parade Registration</a></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>

CSS:

/* .center{
    text-align:center;
}

.row{
    margin:0;
}

.overlay{
     display: none; 
    position: relative;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100vh;
}

.close{
    position: absolute;
    top: 2%;
    right: 2%;
    font-size: 3em;
    border: none;
    background: transparent;
    color: #fff;
    font-weight: bolder;
}

#x-mas-parade{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 */

 :root {
    --modal-duration: 1s;
    --modal-color: #428bca;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f4f4;
    font-size: 17px;
    line-height: 1.6;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
  }
  
  .button {
    background: #428bca;
    padding: 1em 2em;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    display: none;
  }
  
  .button:hover {
    background: #3876ac;
  }
  
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    margin: 10% auto;
    width: 60%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
  }
  
  .modal-header h2,
  .modal-footer h3 {
    margin: 0;
  }
  
  .modal-header {
    background: var(--modal-color);
    padding: 15px;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .modal-body {
    padding: 10px 20px;
    background: #fff;
  }
  
  .modal-footer {
    background: var(--modal-color);
    padding: 10px;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: #fff;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

JS:


// Get DOM Elements
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelector('#modal-btn');
const closeBtn = document.querySelector('.close');

// Events
modalBtn.addEventListener('onload', openModal());
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
 
// Open
function openModal() {
 
  modal.style.display = 'block';
  
}

// Close
function closeModal() {
  modal.style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}

rpg_digital · November 23, 2022, 12:32am

Hi @luismoya89,

Welcome to the forum.

To format your code when posting, select your code in the text editor and click on the </> button in the menu at the top of the editor. This will wrap your code in three backticks e.g.

```
Your code here
```
I have done it this time.

Can you please be a bit clearer with your question? You want it to only fire again in 30 minutes? You don’t want it to fire again in 30 minutes?

To help members help you, it might be easier if you create an example using an online code editor like codepen.io and then share a link.

Thanks

luismoya89 · November 23, 2022, 4:14pm

Yes, I would like the popup to fire onload and then fire every 30minutes after ignoring browser refresh.

James_Hibbard · November 23, 2022, 4:29pm

Hi,

Hitting your visitors with a popup every 30 minutes isn’t very user friendly, so you might want to think if this is something you really need to do.

That said, I wrote a tutorial a while back on how to show a modal after a time delay. This tutorial used a cookie to ensure the modal was only shown once, but you should be able to adapt the logic to make sure it is shown once every 30 mins (the cookie will serve to ignore the browser refresh).

dennisjn · November 28, 2022, 7:14am

Assuming that you are not targeting IE, why don’t you use the html5 “dialog” element?
The dialog tag is much simpler to use than that old kludge that you are using.

system · February 27, 2023, 3:29pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.