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>