Miva Merchant Modules and Development
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.

JQUERY: Timed Modal Popup

Scot Ranney • December 22, 2023


TIMED MODAL POPUP THING

In use on https://www.scanmyphotos.com. SmartModal is not a timed popup modal on it's own, it's just a nice modal. Good choice if you don't want to load bootstrap in the background.

jquery smart modal: https://github.com/bmarshall511/jquery-smartModal

CSS

<link rel="stylesheet" href="/css/jquery.smartModal.css" />

Modal HTML:

<div class="smartmodal auto once row" data-wait="4" style="max-width: 381px;">
	<h3 style="float: right; padding-left: 5px; position: relative; top: -10px; right: -5px;"><a href="#" class="close">X</a></h3>
	<h4 class="align-center">
		SAVE 15% WHEN YOU SUBSCRIBE TO OUR NEWSLETTER
	</h4>
	<p class="align-center" style="text-transform:uppercase; color: #bbb;">
		Subscribe to our newsletter to stay up to date with the latest news and offers
	</p>
	<div class="column  align-center" style="padding-top: 10px;">
	<form method="post" action=";
		<div class="column three-fourths np"> 
			<input type="text" name="email" placeholder="email address" style="padding: 25px;">
		</div>
		<div class="column one-fourth medium-one-eighth np">
			<input type="submit" value="Sign Up" class="button button-square nb" style="padding: 10px; height: auto;">
		</div>
		<input type="hidden" name="group" value="1151015491">
	</form>
	</div>
</div>
<mvt:comment> 
|
| END JQUERY SMART MODAL 
|
</mvt:comment>

Modal JS:

<script src="/js/jquery.smartModal.min.js"></script>
<script>
<script>
$(function() {
  $.smartModal({
  clickclose: true
});
});
</script>

https://www.scotsscripts.com/mvblog/jquery-timed-modal-popup.html

mvkb_modal mvkb_jquery