modaal.js and jquery.cookie.js: How to Set the Re-display Interval for a Modal

Modal display is an effective method to make the user interface more interactive and engaging.
In this article, we will explain in detail how to set the re-display interval of a modal window using modaal.js and jquery.cookie.js.
By implementing this mechanism, the modal will appear on the first page load and will be controlled so that it will not be displayed again during the specified period.

We have also prepared a demo page you can try and step-by-step instructions easy to understand for beginners, so please read to the end.

CSS code for setting the modal re-display interval

First, set up the CSS to style the appearance of the modal.
Load the modaal.min.css file. The CSS includes the modal area (#modalarea), modal display (.modaal-container) width, and close button (.modaal-close).
The following CSS is a basic styling example. Customize as needed.

<link rel="stylesheet" type="text/css" href="modaal.min.css">
<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding-top: 20px;
}
h2{
  font-size: 18px;
}
p{
  padding-bottom: 10px;
  font-size: 18px;
}
#modalarea{
  display: none;
}
.modaal-container{
  max-width: 90%;
  text-align: center;
}
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#333;
}
</style>

HTML code for setting the modal re-display interval

Next, write the HTML code. Here, we create the modal area (id=”modalarea”) and the modal display link.

<h1>Using modaal.js and jquery.cookie.js to prevent modal re-display for a set cookie period after the first modal display.</h1>
<p>The modal will display on the first page load, and even if you refresh the page, the modal area will not re-display for 10 seconds as set in the cookie.<br>Click the "Modal Display Link" to show the modal.</p>


<div><a href="#modalarea" class="modal">Modal Display Link</a></div>
  
<section id="modalarea">
  <h2>Modal Area</h2>
  <p>This is the modal display area.</p>
</section>

JavaScript code for setting the modal re-display interval using modaal.js and jquery.cookie.js

Below is the JavaScript code. Load jquery.min.js (ver.1), modaal.min.js, and jquery.cookie.js files.
This code uses jquery.cookie.js to control the modal re-display interval.
Set the modal re-display interval (10 seconds later) to the cookie key (pview), and write $(“modal display trigger link class”).modaal({options}).
In the options, you can set speed, background color, opacity, etc. For the option setting start_open (true/false), set false only for the duration specified by the cookie and true otherwise (variable flg).

<script src="jquery.js"></script>
<script src="modaal.min.js"></script>
<script src="jquery.cookie.js"></script>
<script type="text/javascript">
let date = new Date();
date.setTime( date.getTime() + ( 10 * 1000 )); //10 seconds
var pview = $.cookie('pview');

if(!pview){
  flg = true;
  $.cookie('pview', false, { expires: date }); //set cookie for 10 seconds
}else{
  flg = false  
}

//Modal display
$(".modal").modaal({
  start_open:flg,
  overlay_close:true,
  before_open:function(){
    $('html').css('overflow-y','hidden');
  },
  after_close:function(){
    $('html').css('overflow-y','scroll');
  }
});
</script>

Demo page: Setting the modal re-display interval with modaal.js and jquery.cookie.js

If you want to check the actual operation, please visit the demo page from the link below.

Demo page: Setting the modal re-display interval with modaal.js and jquery.cookie.js

Related Resources

• Official Modaal.js site
• Official jquery.cookie repository

Conclusion

In this article, we explained how to control modal display using modaal.js and jquery.cookie.js.
By leveraging this mechanism, you can not only improve user experience but also contribute to optimizing page performance and usability. Give it a try!

　
※If you reuse this code, please do so at your own risk.
Please do not reuse the Google Analytics tag in the head of the demo page.