Delayed Modal Popup

Developer
Chris Steurer
Size
4,480 Kb
Views
8,096
  1. Delayed Modal Popup Previews
  2. Delayed Modal Popup HTML Codes
  3. Delayed Modal Popup CSS Codes
  4. Delayed Modal Popup JS Codes

How do I make an delayed modal popup?

This is a delayed popup window that is intended to be used with MailChimp forms, but you can replace with any content that you want.. What is a delayed modal popup? How do you make a delayed modal popup? This script and codes were developed by Chris Steurer on 08 December 2022, Thursday.

Delayed Modal Popup Previews
IQ Test

Delayed Modal Popup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Delayed Modal Popup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="instructions">Wait for 5 seconds</div>
<div id="bkgOverlay" class="backgroundOverlay"></div>
<div id="delayedPopup" class="delayedPopupWindow"> <!-- This is the close button --> <a href="#" id="btnClose" title="Click here to close this deal box.">[ X ]</a> <!-- This is the left side of the popup for the description --> <div class="formDescription"> <h2>Sign Up and <span style="color: #40c348; font-weight: bold;">Save $25!</span></h2> <p>Sign up for our Deal Alerts and save $25 Off of your first order of $50 or more!</p> </div> <!-- Begin MailChimp Signup Form --> <div id="mc_embed_signup"> <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate=""> <div class="mc-field-group"> <label for="mce-FNAME">First Name <span class="asterisk">*</span> </label> <input type="text" value="" name="FNAME" class="" id="mce-FNAME"> </div> <div class="mc-field-group"> <label for="mce-LNAME">Last Name <span class="asterisk">*</span> </label> <input type="text" value="" name="LNAME" class="" id="mce-LNAME"> </div> <div class="mc-field-group"> <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;"> <input type="text" name="b_2aabb98e55b83ba9d3bd551f5_e6c08b53b4" value=""> </div> <div class="clear"> <input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> </form> </div> <!-- End MailChimp Signup Form -->
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Delayed Modal Popup - Script Codes CSS Codes

.instructions { text-align: center; font-size: 20px; margin: 15vh;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////	// Default Modal Styles //
////////////////////////////////////////////////////////////////////////////////////////////// */
/* This is the 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;
}
/* This is the 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;
}
/* This is the closing button */
#btnClose { width: 100%; display: block; text-align: right; text-decoration: none; color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover { color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription { float: left; display: block; width: 44%; padding: 1% 3%; font-size: 18px; color: #666; clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 { color: #444444; font-size: 36px; line-height: 40px;
}
/*
////////// MailChimp Signup Form //////////////////////////////
*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup { float: left; width: 47%; padding: 1%; display: block; font-size: 16px; color: #666; margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input { width: 95%; height: 30px; font-size: 18px; padding: 3px; margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover { border: solid 2px #40c348; box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus { border: solid 2px #40c348; box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe { width: 100% !important; height: 40px !important; margin: 10px auto 0 auto; background: #5D9E62; border: none; color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover { background: #40c348; color: #fff; box-shadow: none !important; cursor: pointer;
}

Delayed Modal Popup - Script Codes JS Codes

$(document).ready(function ()
{	//Fade in delay for the background overlay (control timing here)	$("#bkgOverlay").delay(4800).fadeIn(400); //Fade in delay for the popup (control timing here)	$("#delayedPopup").delay(5000).fadeIn(400);	//Hide dialouge and background when the user clicks the close button	$("#btnClose").click(function (e)	{	HideDialog();	e.preventDefault();	});
});
//Controls how the modal popup is closed with the close button
function HideDialog()
{	$("#bkgOverlay").fadeOut(400);	$("#delayedPopup").fadeOut(300);
}
Delayed Modal Popup - Script Codes
Delayed Modal Popup - Script Codes
Home Page Home
Developer Chris Steurer
Username stoypenny
Uploaded December 08, 2022
Rating 3
Size 4,480 Kb
Views 8,096
Do you need developer help for Delayed Modal Popup?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Steurer (stoypenny) Script Codes
Name
Analytics Data
Responsive Menu
Vertical WooCommerce jQuery Menu with Subcategories
Product Hover Display Cards
A Pen by Chris Steurer
Button With Image Zoom On Hover
Elegent Slide Up Modal Forms
Social Icon Buttons
Stylish Credit Card Form
Realistic Buttons
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!