Modal Window
Front uses third-party Custombox dialog plugin, so add dialogs to your site for lightboxes, user notifications, or completely custom content.
Exit intent detection example #1
This modal window options uses a jQuery plugin assets/vendor/exit-Intent-detection/jquery.exitintent.min.js that detects (and triggers events) when users are leaving the page. For this reason, the modal window does not appear, until mouse is hovered on URL.
Example can be seen in Blog Agency and mouseover to the URL.
HTML:
Include these metatags right before <head> tag is closed.
<head>
<meta property="og:url" content="http://localhost:8080">
<meta property="og:type" content="website">
<meta property="og:title" content="Front">
<meta property="og:description" content="Your description">
</head>
Include this script right after open <body> tag.
<body>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '211814435920978',
xfbml: true,
version: 'v2.8'
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
<div id="facebookModal" class="u-modal-window u-modal--facebook">
<button class="btn btn-xs u-btn--icon u-btn-text-white u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<header class="u-modal--facebook__content">
<a class="u-modal--facebook__navbar u-modal--facebook__space" target="_blank" href="https://www.facebook.com/htmlstream">
<img class="u-modal--facebook__navbar-logo img-fluid" alt="facebook" src="../assets/img/logos/facebook.png">
</a>
<div class="u-modal--facebook__space">
<p class="u-modal--facebook__text">Click <strong>"Like"</strong> to read our blog on Facebook</p>
</div>
</header>
<div class="u-modal--facebook__space">
<div class="fb-like"
data-href="https://www.facebook.com/htmlstream"
data-width="270"
data-layout="standard"
data-action="like"
data-show-faces="true"
data-share="false">
</div>
</div>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/animate.css">
<link rel="stylesheet" href="assets/vendor/custombox/dist/custombox.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/exit-Intent-detection/jquery.exitintent.min.js"></script>
<script src="assets/vendor/custombox/dist/custombox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
// Facebook Modal Window
$.exitIntent('enable');
var i = 0;
function exitIntent() {
new Custombox.modal({
content: {
effect: 'blur',
target: '#facebookModal'
}
}).open();
i++;
}
$(document).bind('exitintent', function () {
if (i < 1) {
exitIntent();
}
});
</script>
Subscription modal #1
Example can be seen in Blog Start-Up and scroll down to the bottom of the page.
HTML:
<div id="subscribeModal" class="js-subscribe-window rounded u-modal-window u-modal-window--subscribe"
data-modal-type="ontarget"
data-target="#subscribeModalAnchor"
data-speed="500">
<button class="btn btn-xs u-btn--icon u-btn-text-white u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<div class="bg-primary text-center rounded p-7">
<div class="mb-4">
<h3 class="h1 text-white mb-1"><strong>Subscribe</strong></h3>
<p class="u-text-light mb-0">Get the latest updates from Front.</p>
</div>
<figure class="w-80 mx-auto mb-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 217 108.3" style="enable-background:new 0 0 217 108.3;" xml:space="preserve">
<path class="u-fill-white" opacity=".15" d="M214.7,108c1.2,0,2.3-1,2.2-2.3C215.5,47.1,167.5,0,108.5,0S1.5,47.1,0,105.7c0,1.2,1,2.3,2.2,2.3H214.7z"/>
<g id="XMLID_301_">
<g id="XMLID_122_">
<g id="XMLID_168_">
<path id="XMLID_300_" class="u-fill-white" d="M69.6,101l-18.2-5.7c-0.6-0.2-0.9-0.8-0.7-1.3l5.7-18.2c0.2-0.6,0.8-0.9,1.3-0.7l18.2,5.7
c0.6,0.2,0.9,0.8,0.7,1.3l-5.7,18.2C70.7,100.9,70.1,101.2,69.6,101z"/>
<rect id="XMLID_195_" x="55.8" y="79.9" transform="matrix(0.9537 0.3006 -0.3006 0.9537 29.2174 -15.1019)" class="u-fill-primary-lighter" width="15.8" height="14.9"/>
<path id="XMLID_59_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M54.6,81.7l1.8-5.7c0.2-0.7,0.9-1.1,1.6-0.8l3.4,1.2"/>
</g>
<g id="XMLID_132_">
<path id="XMLID_165_" class="u-fill-white" d="M48.6,91.9l-19.3,4.3c-0.8,0.2-1.7-0.3-1.9-1.2l-2.8-12.7c-0.2-0.8,0.3-1.7,1.2-1.9L45,76.2
c0.8-0.2,1.7,0.3,1.9,1.2L49.8,90C49.9,90.9,49.4,91.7,48.6,91.9z"/>
<path id="XMLID_160_" class="u-fill-primary-lighter" opacity=".5" d="M46.6,75.8l-9,9.9c-0.2,0.3-0.6,0.3-0.9,0.2l-12.4-5.1L46.6,75.8z"/>
<path id="XMLID_153_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M24.5,80.9l12.2,5c0.3,0.1,0.7,0,0.9-0.2l8.7-9.6"/>
<path id="XMLID_379_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M27.3,94.6l-2.9-12.8c-0.1-0.5,0.2-1.1,0.8-1.2l2.1-0.5"/>
<path id="XMLID_152_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M32.7,78.9L45.6,76c0.5-0.1,1.1,0.2,1.2,0.8l1.1,4.9"/>
<line id="XMLID_286_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="29.1" y1="79.8" x2="31.5" y2="79.2"/>
</g>
<path id="XMLID_482_" class="u-fill-white" d="M71.2,96.7H71c-0.9-3.1-3.7-5.3-7.1-5.3c-1.5,0-2.8,0.4-4,1.2c-0.7-4.9-4.9-8.6-10-8.6
c-4.5,0-8.4,3-9.7,7.1c-0.6-0.2-1.2-0.2-1.8-0.2c-3.5,0-6.3,2.5-6.9,5.9h-1.1c-2.9,0-5.2,2.3-5.2,5.2v0.4c0,2.9,2.3,5.2,5.2,5.2
h40.8c2.9,0,5.2-2.3,5.2-5.2v-0.4C76.4,99.1,74.1,96.7,71.2,96.7z"/>
<path id="XMLID_60_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M59.9,92.6c-0.7-4.9-4.9-8.6-10-8.6c-4.5,0-8.4,3-9.7,7.1c-0.6-0.2-1.2-0.2-1.8-0.2
c-3.5,0-6.3,2.5-6.9,5.9h-1.1c-2.9,0-5.2,2.3-5.2,5.2v0.4c0,2.9,2.3,5.2,5.2,5.2h7.3h25.6h7.9"/>
<path id="XMLID_480_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M56.5,91.7c-1.5-2.3-4.1-3.8-7.1-3.8c-1.6,0-3,0.4-4.3,1.2"/>
<path id="XMLID_479_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M38.6,90.8c2,0,3.6,1.6,3.6,3.6"/>
<g id="XMLID_125_">
<path id="XMLID_130_" class="u-fill-white" d="M50.1,71.2c0.1,0.8-0.7,1.5-1.8,1.7c-1.1,0.2-2.1-0.3-2.2-1c-0.1-0.8,0.7-1.5,1.8-1.7
C49,69.9,50,70.4,50.1,71.2z"/>
<path id="XMLID_129_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M50.1,71.2c0.1,0.8-0.7,1.5-1.8,1.7c-1.1,0.2-2.1-0.3-2.2-1c-0.1-0.8,0.7-1.5,1.8-1.7
C49,69.9,50,70.4,50.1,71.2z"/>
<path id="XMLID_128_" class="u-fill-white" d="M55.8,71.2c0.1,0.8-0.7,1.5-1.8,1.7c-1.1,0.2-2.1-0.3-2.2-1c-0.1-0.8,0.7-1.5,1.8-1.7
C54.7,69.9,55.7,70.4,55.8,71.2z"/>
<path id="XMLID_127_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M55.8,71.2c0.1,0.8-0.7,1.5-1.8,1.7c-1.1,0.2-2.1-0.3-2.2-1c-0.1-0.8,0.7-1.5,1.8-1.7
C54.7,69.9,55.7,70.4,55.8,71.2z"/>
<polyline id="XMLID_126_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" points="50.2,71.3 50.2,64.1 55.9,64.1 55.9,71.3 "/>
</g>
</g>
<g id="XMLID_29_">
<line id="XMLID_31_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="94.8" y1="16" x2="99.1" y2="16"/>
<line id="XMLID_30_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="97" y1="18.1" x2="97" y2="13.8"/>
</g>
<g id="XMLID_274_">
<line id="XMLID_289_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="32.1" y1="27.3" x2="36.4" y2="27.3"/>
<line id="XMLID_280_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="34.2" y1="29.4" x2="34.2" y2="25.1"/>
</g>
<g id="XMLID_225_">
<line id="XMLID_273_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="195" y1="72.2" x2="199.3" y2="72.2"/>
<line id="XMLID_228_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="197.1" y1="74.3" x2="197.1" y2="70"/>
</g>
<g id="XMLID_21_">
<line id="XMLID_23_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="179.3" y1="44" x2="182.3" y2="41"/>
<line id="XMLID_22_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="182.3" y1="44" x2="179.3" y2="41"/>
</g>
<g id="XMLID_124_">
<line id="XMLID_194_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="31.2" y1="68.2" x2="34.2" y2="65.2"/>
<line id="XMLID_131_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="34.2" y1="68.2" x2="31.2" y2="65.2"/>
</g>
<line id="XMLID_35_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="86.8" y1="7.2" x2="133" y2="7.2"/>
<line id="XMLID_26_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="69.4" y1="16.1" x2="86.8" y2="16.1"/>
<line id="XMLID_123_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="158.8" y1="42.5" x2="176.2" y2="42.5"/>
<line id="XMLID_36_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="91.9" y1="16.1" x2="88.3" y2="16.1"/>
<path id="XMLID_118_" class="u-fill-primary" d="M184.3,80.9c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C183.8,79.7,184.3,80.2,184.3,80.9z"/>
<path id="XMLID_295_" class="u-fill-primary" d="M140,16c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C139.5,14.7,140,15.3,140,16z"/>
<path id="XMLID_205_" class="u-fill-primary" d="M19.4,53.3c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C18.9,52,19.4,52.6,19.4,53.3z"/>
<path id="XMLID_197_" class="u-fill-primary" d="M157.7,33.1c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-0.8-0.4-0.8-0.8c0-0.4,0.4-0.8,0.8-0.8
C157.4,32.3,157.7,32.7,157.7,33.1z"/>
<path id="XMLID_198_" class="u-fill-primary" d="M56.7,12.9c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-0.8-0.4-0.8-0.8c0-0.4,0.4-0.8,0.8-0.8
C56.3,12.1,56.7,12.5,56.7,12.9z"/>
<g id="XMLID_11_">
<path id="XMLID_7_" class="u-fill-primary-lighter" opacity=".2" d="M144.2,107.5V30.7c0-2-1.6-3.7-3.7-3.7H86.3c-2,0-3.7,1.7-3.7,3.7v76.8L144.2,107.5z"/>
<path id="XMLID_5_" class="u-fill-primary-lighter" opacity=".2" d="M82.7,39.2v-9.1c0-1.7,1.4-3.1,3.1-3.1h55.4c1.7,0,3.1,1.4,3.1,3.1v9.1H82.7z"/>
<path id="XMLID_276_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M82.7,63.5V30.1c0-1.7,1.4-3.1,3.1-3.1h6.5h1.7"/>
<path id="XMLID_277_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M104.6,27h36.5c1.7,0,3.1,1.4,3.1,3.1V44"/>
<line id="XMLID_4_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="96.9" y1="27" x2="101.1" y2="27"/>
<line id="XMLID_284_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="82.7" y1="39.4" x2="144.2" y2="39.4"/>
<line id="XMLID_283_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="87" y1="31.4" x2="88.6" y2="31.4"/>
<line id="XMLID_8_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="90.9" y1="31.4" x2="92.5" y2="31.4"/>
<line id="XMLID_281_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="94.8" y1="31.4" x2="96.4" y2="31.4"/>
<rect id="XMLID_275_" x="84.5" y="43.8" class="u-fill-white" width="57.7" height="63.7"/>
<rect id="XMLID_20_" x="102.2" y="33.8" class="u-fill-white" width="32.7" height="2.2"/>
<rect id="XMLID_19_" x="93" y="33.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 193.4763 69.7701)" class="u-fill-white" width="7.4" height="2.2"/>
<rect id="XMLID_18_" x="87" y="33.8" class="u-fill-white" width="4.7" height="2.2"/>
<rect id="XMLID_17_" x="88.3" y="47.4" class="u-fill-primary-lighter" opacity=".5" width="17.4" height="23.4"/>
<rect id="XMLID_16_" x="109.9" y="47.4" class="u-fill-primary-lighter" opacity=".2" width="28.9" height="34.6"/>
<rect id="XMLID_14_" x="109.9" y="87.7" class="u-fill-primary-lighter" opacity=".5" width="28.9" height="5.7"/>
<path id="XMLID_13_" class="u-fill-primary-lighter" opacity=".5" d="M95.5,77.9h-6.1c-0.5,0-0.9-0.4-0.9-0.9l0,0c0-0.5,0.4-0.9,0.9-0.9h6.1c0.5,0,0.9,0.4,0.9,0.9
l0,0C96.4,77.5,96,77.9,95.5,77.9z"/>
<path id="XMLID_12_" class="u-fill-primary-lighter" d="M104.2,77.9h-6.1c-0.5,0-0.9-0.4-0.9-0.9l0,0c0-0.5,0.4-0.9,0.9-0.9h6.1
c0.5,0,0.9,0.4,0.9,0.9l0,0C105,77.5,104.6,77.9,104.2,77.9z"/>
</g>
<path id="XMLID_304_" class="u-fill-primary" opacity=".3" d="M142.2,107.5L142.2,107.5l2,0V45.4h-11.4c-2.2,0-4.1,1.6-4.4,3.8c-2.6,0.3-4.6,2.6-4.6,5.3
v7.3c0,0.8,0.3,1.6,0.7,2.2c-0.4,0.4-0.7,1-0.7,1.7v1.6c0,1.3,1.1,2.4,2.4,2.4c0.2,0,0.5,0,0.7-0.1c0.6,5.2,4.2,9.5,9,11.1v0.2
c-2,0.5-4,1.2-5.8,2.3l0.4,0.7c-1,0.6-1.8,1.2-2.6,1.9l-0.5-0.6c-1.4,1.2-2.6,2.7-3.5,4.2l0.7,0.4c-0.5,1-1,2-1.3,3l-0.7-0.2
c-0.4,1.3-0.5,2.5-0.5,3.8v11H142.2z"/>
<g id="XMLID_476_">
<path id="XMLID_56_" class="u-fill-white" d="M158.3,67.3c0,0.9-0.8,1.7-1.7,1.7l0,0c-0.9,0-1.7-0.7-1.7-1.7v-1.6c0-0.9,0.8-1.7,1.7-1.7
l0,0c0.9,0,1.7,0.7,1.7,1.7V67.3z"/>
<path id="XMLID_54_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M158.3,67.3c0,0.9-0.8,1.7-1.7,1.7l0,0c-0.9,0-1.7-0.7-1.7-1.7v-1.6c0-0.9,0.8-1.7,1.7-1.7
l0,0c0.9,0,1.7,0.7,1.7,1.7V67.3z"/>
<path id="XMLID_517_" class="u-fill-white" d="M129.9,67.3c0,0.9-0.8,1.7-1.7,1.7l0,0c-0.9,0-1.7-0.7-1.7-1.7v-1.6c0-0.9,0.8-1.7,1.7-1.7
l0,0c0.9,0,1.7,0.7,1.7,1.7V67.3z"/>
<path id="XMLID_516_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M129.9,67.3c0,0.9-0.8,1.7-1.7,1.7l0,0c-0.9,0-1.7-0.7-1.7-1.7v-1.6c0-0.9,0.8-1.7,1.7-1.7
l0,0c0.9,0,1.7,0.7,1.7,1.7V67.3z"/>
<path id="XMLID_53_" class="u-fill-primary-lighter" d="M160.5,107.5v-11c0-8.4-8-15.3-17.9-15.3l0,0c-9.8,0-17.9,6.9-17.9,15.3v11H160.5z"/>
<path id="XMLID_513_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M125.3,92.8c-0.3,1.2-0.5,2.4-0.5,3.6v11"/>
<path id="XMLID_511_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M129.9,85.8c-1.3,1.2-2.5,2.5-3.3,4"/>
<path id="XMLID_51_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M154.2,84.8c-3.1-2.3-7.2-3.7-11.6-3.7l0,0c-3.8,0-7.2,1-10.1,2.7"/>
<line id="XMLID_50_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="134.9" y1="95.4" x2="134.9" y2="107.5"/>
<line id="XMLID_49_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="150.5" y1="95.4" x2="150.5" y2="107.5"/>
<path id="XMLID_48_" class="u-fill-white" d="M142,87.3L142,87.3c-1.8,0-3.3-1.5-3.3-3.3v-7.5c0-1.6,1.3-2.9,2.9-2.9h0.9
c1.6,0,2.9,1.3,2.9,2.9V84C145.3,85.8,143.8,87.3,142,87.3z"/>
<path id="XMLID_45_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M142,87.3L142,87.3c-1.8,0-3.3-1.5-3.3-3.3v-7.5c0-1.6,1.3-2.9,2.9-2.9h0.9
c1.6,0,2.9,1.3,2.9,2.9V84C145.3,85.8,143.8,87.3,142,87.3z"/>
<path id="XMLID_485_" class="u-fill-white" d="M142.3,80.7L142.3,80.7c-7,0-12.7-5.7-12.7-12.7v-8.6c0-7,5.7-6.8,12.7-6.8l0,0
c7,0,12.7-0.2,12.7,6.8V68C155,75,149.3,80.7,142.3,80.7z"/>
<path id="XMLID_484_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M142.3,80.7L142.3,80.7c-7,0-12.7-5.7-12.7-12.7v-8.6c0-7,5.7-6.8,12.7-6.8l0,0
c7,0,12.7-0.2,12.7,6.8V68C155,75,149.3,80.7,142.3,80.7z"/>
<path id="XMLID_483_" class="u-fill-white" d="M129.6,64.8L129.6,64.8c-1.7,0-3-1.4-3-3v-7.3c0-2.5,2-4.6,4.6-4.6l0,0l0,0
c0-2.1,1.7-3.7,3.7-3.7h18.5c2.5,0,4.5,2,4.5,4.5v11c0,1.6-1.4,2.9-3,2.8l0,0v-7.3c0,0-2.1,3.4-8.7,3.4c-7.9,0-13.1-3.9-13.1-3.9
s-0.5,1.1-1.6,2c-1,0.9-2,0.6-2,0.6V64.8z"/>
<path id="XMLID_44_" class="u-fill-primary-lighter" opacity=".15" d="M129.6,64.8v-5.5c0,0,1,0.3,2-0.6c1.1-0.9,1.6-2,1.6-2s10.4,5.5,16.7,3.5
c-6.8-2.9-15.5-4.7-17-13.4c-1,0.7-1.7,1.8-1.7,3.1c-2.5,0-4.6,2-4.6,4.6v7.3C126.6,63.4,127.9,64.8,129.6,64.8z"/>
<path id="XMLID_478_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M154.9,57.2v7.3l0,0c1.6,0.1,3-1.2,3-2.8v-11c0-2.5-2-4.5-4.5-4.5h-18.5
c-2.1,0-3.7,1.7-3.7,3.7l0,0l0,0c-2.5,0-4.6,2-4.6,4.6v7.3c0,1.7,1.4,3,3,3h0v-5.5c0,0,1,0.3,2-0.6c1.1-0.9,1.6-2,1.6-2"/>
<path id="XMLID_477_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M131.4,55.5c0,0,6.9,5.1,14.9,5.1c6.6,0,9.6-4.5,9.6-4.5"/>
</g>
<path id="XMLID_303_" class="u-fill-primary" opacity=".3" d="M92.2,105.2V68.3c0-1.7-1.4-3.1-3.1-3.1h-6.4v42.3h8.4C91.8,106.9,92.2,106.1,92.2,105.2z"/>
<g id="XMLID_77_">
<g id="XMLID_83_">
<path id="XMLID_121_" class="u-fill-white" d="M87.4,107.5H65.3c-1.1,0-2-0.9-2-2V67.9c0-1.1,0.9-2,2-2h22.2c1.1,0,2,0.9,2,2v37.6
C89.4,106.6,88.5,107.5,87.4,107.5z"/>
<path id="XMLID_120_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M72.3,65.9h14.8c1.3,0,2.3,1,2.3,2.3v36.9c0,1.3-1,2.3-2.3,2.3H65.6c-1.3,0-2.3-1-2.3-2.3
V68.3c0-1.3,1-2.3,2.3-2.3h1.4"/>
<line id="XMLID_119_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="68.4" y1="65.9" x2="71.3" y2="65.9"/>
<line id="XMLID_117_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="72.5" y1="69.1" x2="80.2" y2="69.1"/>
<path id="XMLID_110_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M77.6,104.1c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C77.1,102.8,77.6,103.4,77.6,104.1z"/>
<rect id="XMLID_108_" x="65.9" y="71.9" class="u-fill-primary-lighter" width="20.9" height="29.5"/>
</g>
</g>
<g id="XMLID_39_">
<path id="XMLID_40_" class="u-fill-primary-lighter" opacity=".5" d="M77.4,58.3l-1.5-8.1c0.9-1.9,1.3-4,1.3-6.3c0-8.5-6.9-15.4-15.4-15.4
c-8.5,0-15.4,6.9-15.4,15.4c0,8.5,6.9,15.4,15.4,15.4c3,0,5.8-0.9,8.2-2.4L77.4,58.3z"/>
<path id="XMLID_33_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M47.9,50.4c2.5,5.2,7.8,8.8,13.9,8.8c3,0,5.8-0.9,8.2-2.4l7.4,1.4l-1.5-8.1
c0.9-1.9,1.3-4,1.3-6.3c0-3.7-1.3-7.1-3.4-9.7"/>
<path id="XMLID_32_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M68,29.7c-1.9-0.8-4-1.3-6.2-1.3c-6.4,0-11.9,3.9-14.2,9.4"/>
<path id="XMLID_37_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M72.8,33c-1-1-2.1-1.8-3.3-2.5"/>
<ellipse id="XMLID_34_" class="u-fill-white" cx="61.9" cy="43.9" rx="11.9" ry="11.6"/>
<g id="XMLID_57_">
<path id="XMLID_62_" class="u-fill-gray-75" d="M63.6,39.8h0.3c0.3-0.8,0.6-1.8,0.6-2.5c0-0.3,0-0.8,0-1.2c0,0.1,0,0.2,0,0.3
C64.5,37.6,63.6,39.8,63.6,39.8z"/>
<path id="XMLID_747_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M68.9,45.1h1.9c0.6,0,1.1-0.5,1.1-1.1l0,0c0-0.6-0.5-1.1-1.1-1.1h-1.9"/>
<path id="XMLID_746_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M66.9,47.3h2.6c0.6,0,1.1-0.5,1.1-1.1l0,0c0-0.6-0.5-1.1-1.1-1.1h-2.6"/>
<path id="XMLID_745_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M67.4,47.3h1c0.6,0,1.1,0.5,1.1,1.1l0,0c0,0.6-0.5,1.1-1.1,1.1h-6.2c-0.3,0-0.6-0.1-0.8-0.3
l-1.1-1.1c-0.2-0.2-0.4-0.3-0.6-0.3h-0.3"/>
<path id="XMLID_61_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M66.9,42.9h3.4c0.6,0,1.1-0.5,1.1-1.1l0,0c0-0.6-0.5-1.1-1.1-1.1h-4.2h-2.7
c0,0,0.9-2.3,0.9-3.4c0-0.5,0.1-1.5-0.2-2c-0.1-0.2-1-0.2-1.1,0c0,0-0.8,2.6-1.4,3.3c-0.3,0.4-1.5,2-1.5,2H59"/>
<path id="XMLID_113_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M57,39.6h1.3c0.5,0,0.9,0.4,0.9,0.9V48c0,0.5-0.4,0.9-0.9,0.9h-5.2"/>
</g>
<line id="XMLID_24_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="52.1" y1="48.9" x2="32.1" y2="48.9"/>
<line id="XMLID_9_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="54.7" y1="45.8" x2="42.9" y2="45.8"/>
<line id="XMLID_25_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="39.1" y1="45.8" x2="41.9" y2="45.8"/>
<line id="XMLID_27_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="55" y1="42.7" x2="29" y2="42.7"/>
<line id="XMLID_28_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="56.5" y1="39.6" x2="29.1" y2="39.6"/>
</g>
<g id="XMLID_417_">
<path id="XMLID_814_" class="u-fill-white" d="M182.4,107.5H153c-0.4,0-0.7-0.3-0.7-0.7V87.4c0-0.4,0.3-0.7,0.7-0.7h29.4
c0.4,0,0.7,0.3,0.7,0.7v19.4C183.1,107.2,182.8,107.5,182.4,107.5z"/>
<path id="XMLID_196_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M182.4,107.5H153c-0.4,0-0.7-0.3-0.7-0.7V87.4c0-0.4,0.3-0.7,0.7-0.7h29.4
c0.4,0,0.7,0.3,0.7,0.7v19.4C183.1,107.2,182.8,107.5,182.4,107.5z"/>
<path id="XMLID_812_" class="u-fill-primary" d="M170.4,95.3l-4.9,2.8c-0.3,0.2-0.7,0-0.7-0.4v-5.7c0-0.4,0.4-0.6,0.7-0.4l4.9,2.8
C170.7,94.7,170.7,95.2,170.4,95.3z"/>
<line id="XMLID_810_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="155.7" y1="103.7" x2="179.3" y2="103.7"/>
<line id="XMLID_809_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="161" y1="105.6" x2="161" y2="101.8"/>
</g>
<g id="XMLID_481_">
<line id="XMLID_15_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="16.8" y1="107.5" x2="19.5" y2="107.5"/>
<line id="XMLID_38_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="186.7" y1="107.5" x2="192.8" y2="107.5"/>
<line id="XMLID_41_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="21.4" y1="107.5" x2="185.2" y2="107.5"/>
</g>
</g>
</svg>
</figure>
<figure class="w-100 u-content-centered z-index-minus-1s">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 466 326.9" style="enable-background:new 0 0 466 326.9;" xml:space="preserve">
<path class="u-fill-success" d="M53,42c3.3,0,6,2.7,6,6s-2.7,6-6,6s-6-2.7-6-6S49.7,42,53,42 M53,37c-6.1,0-11,4.9-11,11s4.9,11,11,11
s11-4.9,11-11S59.1,37,53,37L53,37z"/>
<line class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="50.4" y1="281" x2="55.6" y2="275.9"/>
<line class="u-fill-none u-stroke-white" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="55.6" y1="281" x2="50.4" y2="275.9"/>
<circle class="u-fill-warning" cx="430" cy="135" r="5"/>
</svg>
</figure>
<div class="w-80 mx-auto">
<form class="js-validate js-form-message">
<div class="js-focus-state input-group u-form">
<input type="email" class="form-control u-form__input" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<div class="input-group-append u-form__append">
<button type="button" class="btn btn-success u-btn-success">Subscribe</button>
</div>
</div>
</form>
</div>
</div>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/animate.css">
<link rel="stylesheet" href="assets/vendor/custombox/dist/custombox.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/custombox/dist/custombox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('.js-subscribe-window', {
autonomous: true
});
</script>
Account modal #1
Example can be seen in Account modal window signin and click on the Account icon button.
HTML:
<div id="loginModal" class="js-login-window u-modal-window u-modal-window--account">
<button class="btn btn-xs u-btn--icon u-btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<form class="js-validate p-7">
<div id="login" data-target-group="idForm">
<header class="text-center mb-7">
<h2 class="h4 mb-0">Welcome Back!</h2>
<p>Login to manage your account.</p>
</header>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-user u-form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-2">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-lock u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="password" required
placeholder="Password"
aria-label="Password"
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="clearfix mb-4">
<a class="js-animation-link float-right small u-link-muted" href="javascript:;"
data-target="#forgotPassword"
data-link-group="idForm"
data-animation-in="fadeIn">Forgot Password?</a>
</div>
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Login</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Do not have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#signup"
data-link-group="idForm"
data-animation-in="fadeIn">Signup
</a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
</div>
<div class="d-flex">
<a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0" href="#">
<span class="fab fa-google mr-1"></span>
Google
</a>
</div>
</div>
<div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
<header class="text-center mb-7">
<h2 class="h4 mb-0">Welcome to Front.</h2>
<p>Fill out the form to get started.</p>
</header>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-user u-form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-lock u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="password" required
placeholder="Password"
aria-label="Password"
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-key u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="confirmPassword" required
placeholder="Confirm Password"
aria-label="Confirm Password"
data-msg="Password does not match the confirm password."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Get Started</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Already have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="fadeIn">Login
</a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
</div>
<div class="d-flex">
<a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0" href="#">
<span class="fab fa-google mr-1"></span>
Google
</a>
</div>
</div>
<div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
<header class="text-center mb-7">
<h2 class="h4 mb-0">Recover Password.</h2>
<p>Enter your email address and an email with instructions will be sent to you.</p>
</header>
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fas fa-envelope u-inner-form__text"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Your email"
aria-label="Your email"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Recover Password</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Remember your password?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="fadeIn">Login
</a>
</div>
</div>
</form>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/animate.css">
<link rel="stylesheet" href="assets/vendor/custombox/dist/custombox.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.modal-window.js"></script>
<script src="assets/js/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.validation.js"></script>
<script src="assets/js/components/hs.show-animation.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate', {
rules: {
confirmPassword: {
equalTo: '#password'
}
}
});
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link');
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-shopping-cart-window', {
autonomous: true
});
</script>
Shopping cart modal #1
Example can be seen in Shopping cart modal window empty and click on the shopping cart button.
HTML:
<div id="shoppingCartModal" class="js-shopping-cart-window u-modal-window u-modal-window--shopping-cart">
<button class="btn btn-xs u-btn--icon u-btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<div class="u-shopping-cart-title-wrapper">
<strong>Your Shopping Cart</strong>
</div>
<div class="text-center u-shopping-cart-items-wrapper">
<span class="u-shopping-cart-icon my-4">
<span class="fa fa-shopping-basket u-shopping-cart-icon__inner"></span>
</span>
</div>
<div class="u-shopping-cart-subtotal-bg">
<div class="mb-3">
<strong>Order Total</strong>
<span class="d-block">$0.0</span>
</div>
<a class="disabled btn btn-sm u-btn-primary--air transition-3d-hover" href="../shop/shop-checkout.html">Review Bag and Checkout</a>
<p class="mb-0"><a class="u-shopping-cart-subtotal-link" href="javascript:;" role="button" onclick="Custombox.modal.close();">Start Shopping</a></p>
</div>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/animate.css">
<link rel="stylesheet" href="assets/vendor/custombox/dist/custombox.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/custombox/dist/custombox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-shopping-cart-window', {
autonomous: true
});
</script>
Shopping cart modal #2
Example can be seen in Shopping cart modal window with items and click on the shopping cart button.
HTML:
<div id="shoppingCartModal" class="js-shopping-cart-window u-modal-window u-modal-window--shopping-cart">
<button class="btn btn-xs u-btn--icon u-btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<div class="u-shopping-cart-title-wrapper">
<strong>Your Shopping Cart</strong>
</div>
<div class="u-shopping-cart-items-wrapper">
<div class="d-flex">
<div class="u-shopping-cart-item-img-wrapper mr-4">
<img class="img-fluid" src="../assets/img/64x64/img1.jpg" alt="Image Description">
</div>
<div class="u-shopping-cart-item-info-wrapper">
<div class="d-flex justify-content-between align-items-center">
<strong class="d-block">Nike</strong>
<span class="u-shopping-cart-item-remover" aria-hidden="true">×</span>
</div>
<span class="d-block u-shopping-cart-item-description">Flex 2017 RN Lightweight Casual Hoodie - Men's</span>
<strong class="d-block u-shopping-cart-item-price">$56.99</strong>
<span class="d-block u-shopping-cart-item-other-info">Color: Red</span>
<span class="d-block u-shopping-cart-item-other-info">Size: 8 Medium</span>
<span class="d-block u-shopping-cart-item-other-info">Quantity: 1</span>
</div>
</div>
</div>
<div class="u-shopping-cart-subtotal-bg">
<div class="mb-3">
<strong>Order Total</strong>
<span class="d-block">$56.99</span>
</div>
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="../shop/shop-checkout.html">Review Bag and Checkout</a>
<p class="mb-0"><a class="u-shopping-cart-subtotal-link" href="javascript:;" role="button" onclick="Custombox.modal.close();">Continue Shopping</a></p>
</div>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/animate.css">
<link rel="stylesheet" href="assets/vendor/custombox/dist/custombox.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/custombox/dist/custombox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-shopping-cart-window', {
autonomous: true
});
</script>