I have implemented a sign-up modal on a Bootstrap website and am looking to restrict the number of times visitors see it to twice per session instead of on every page, as well as hiding it once a visitor has subscribed. The modal will appear after 5 seconds of opening a web page and will only close when a user clicks the close button.
//Code for Modal
$(document).ready(function () {
//Setting delay for background overlay fade in
$("#bkgOverlay").delay(5000).fadeIn(400);
//Setting delay for popup fade in
$("#delayedPopup").delay(6000).fadeIn(400);
//Hiding dialogue and background on close button click
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
});
//Function to hide the modal popup with close button
function HideDialog() {
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}html {
background-color: #333;
}
h2 {
text-align: center;
}
/****Modal Styles****/
/*Background Overlay*/
.backgroundOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/*Popup Window*/
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/*Closing Button*/
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/*Hover State for Closing Button*/
#btnClose:hover {
color: #c90c12;
}
/*Headline and Paragraph Styling*/
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/*Styling for Form Headline*/
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*MailChimp Signup Form*/
/*Signup Form Body*/
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/*Styling for Signup Form Inputs*/
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/*Styling for Input Hover State*/
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #97c1c0;
box-shadow: 0 1px 3px #AAAAAA;
}
// More CSS styling...
<html lang="en">
<head>
<title>HOME</title>
-more HTML code here-
</body>
</html>