Show popup modal only once per session

Create a Popup Modal in HTML and CSS

Creating a popup a popup modal in HTML and CSS is not so hard thing. The main tricky part is showing the popup modal in the center or top bar. So to control the position of the popup modal you can use the CSS position property.

1. Take a div and inside the div take the necessary tag you want
2. Design your popup modal using CSS.
3. Use CSS position property to show the popup modal in your targeted position.

<div id="myModal">
  <div class="modal-top">
    <button id="closeBtn">X</button>
  </div>
  <div class="modal-content">
    <img src="https://via.placeholder.com/600x300" alt="modal-image">
  </div>
  <div class="modal-bottom">
    <a href="https://insidethediv.com/" id="startNowBtn">Start Now</a>
  </div>
</div>

Note: Download the complete source code for better understanding.

Show popup modal in the center of the screen always

We already know how can you defined the position of the popup modal, now if you want to show your popup modal in the center of the screen you can use CSS position fixed property and CSS transform property, check the video or download the complete source code for better understanding.

#myModal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Note: Download the complete source code for better understanding.

Show a popup modal automatically

To do something automatically on your website you can use the javascript setTimeout method. This method will take two parameters first one is your function name and the second one is the time(ms). So to show popup modal automatically after one second we will code like this.

setTimeout(showModal,1000);
function showModal(){
  $("#myModal").show()
}

Note: you can create the show and hide popup modal with time countdown using javascript SetTimeout and SetInterval.

Show popup modal only once for a user

Showing a popup modal only once for a user is showing a popup modal conditionally. That means before showing the popup modal automatically you need to check if this popup modal is already shown or not if not shown before then show the popup modal otherwise not.
Now to keep previous showing history you can use browser session storage.

var is_modal_show = sessionStorage.getItem('alreadyShow');
if(is_modal_show != 'alredy shown'){
  $("#myModal").show()
  sessionStorage.setItem('alreadyShow','alredy shown');
}

Note: Download the complete source code for better understanding.

Algorithm of showing a popup modal only once for a single session

1. Get the popup modal showing history from local storage
2. Check alredy shown or not
3. If not shown previously, show the popup modal and update the showing history.

Note: Download the complete source code for better understanding.