Miva Merchant Development by Scot's Scripts

JQUERY: Timed Modal Popup

Miva Knowledge Base
JQUERY: Timed Modal Popup
Important Notice: This information is for internal reference only. Use at your own risk.
Does Google actually understand your Miva Merchant store? Our JSON-LD schema generator makes sure it does. Contact us to get started. (more info)

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