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>
Add tasks modal #1
HTML:
<!-- Modal Trigger -->
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#addTaskModal"
data-modal-target="#addTaskModal"
data-overlay-color="#111722">
<span class="fa fa-plus font-size-13 mr-2"></span>
Add Task
</a>
<!-- End Modal Trigger -->
<!-- Add Task Modal Window -->
<div id="addTaskModal" class="js-add-project-window u-modal-window bg-transparent" style="width: 680px;">
<form class="bg-white rounded mb-9">
<!-- Header -->
<header class="row justify-content-between align-items-center no-gutters u-bg-light-blue-50 rounded-top py-3 px-5">
<div class="col-3">
<h4 class="h6 mb-0">Add a new task</h4>
</div>
<div class="col-9 text-right">
<!-- Icons -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="#" data-toggle="tooltip" data-placement="top" title="Add attach">
<span class="fa fa-paperclip u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="#" data-toggle="tooltip" data-placement="top" title="Copy task URL">
<span class="fa fa-link u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="#" data-toggle="tooltip" data-placement="top" title="Like this">
<span class="fa fa-thumbs-up u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<!-- Settings Dropdown -->
<div class="position-relative">
<a id="createProjectSettingsDropdown1Invoker" class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="javascript:;" role="button"
aria-controls="createProjectSettingsDropdown1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#createProjectSettingsDropdown1"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="createProjectSettingsDropdown1" class="u-unfold right-0 text-left mt-2" aria-labelledby="createProjectSettingsDropdown1Invoker" style="min-width: 160px;">
<a class="u-list__link" href="#">Tags</a>
<a class="u-list__link" href="#">Add flag</a>
<a class="u-list__link" href="#">Add to project</a>
<a class="u-list__link" href="#">Delete task</a>
<a class="u-list__link" href="#">Copy task...</a>
<a class="u-list__link" href="#">Print</a>
</div>
</div>
<!-- End Settings Dropdown -->
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="javascript:;" onclick="Custombox.modal.close();">
<span class="fas fa-times u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Icons -->
</div>
</header>
<!-- End Header -->
<hr class="my-0">
<!-- Alert -->
<div class="alert alert-warning font-size-14 rounded-0 px-5 mb-0" role="alert">
This task visible to members of Front Template. <a class="alert-link" href="#">Make public</a>
</div>
<!-- End Alert -->
<div class="pt-3 pb-5 px-5">
<!-- Task Title -->
<div class="input-group u-form u-form--no-brd mb-3">
<input class="form-control u-form__input pl-0" type="text" placeholder="Enter a task title" aria-label="Enter a task title">
</div>
<!-- End Task Title -->
<!-- Status -->
<div class="row mx-gutters-2 mb-3">
<div class="col-sm-4 mb-3 mb-sm-0">
<label class="d-block small text-uppercase font-weight-medium">Status</label>
<!-- Select -->
<select class="js-select u-select"
data-width="100%"
data-style="u-btn-primary--air btn-sm">
<option value="markComplete">Mark complete</option>
<option value="completed">Completed</option>
</select>
<!-- End Select -->
</div>
<div class="col-6 col-sm">
<label class="d-block small text-uppercase font-weight-medium">Assignee</label>
<!-- Select -->
<select class="js-select u-select" title="Add assignee"
data-width="100%"
data-style="btn-sm bg-transparent text-secondary font-weight-normal px-0"
data-live-search="true"
data-searchbox-classes="input-group-sm">
<option value="assignee1" data-tokens="user1" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img9.jpg" alt="Image Description">
<span>Sebastian Diaz</span>
</span>'>
Sebastian Diaz
</option>
<option value="assignee2" data-tokens="user2" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img7.jpg" alt="Image Description">
<span>Eliza Donovan</span>
</span>'>
Eliza Donovan
</option>
<option value="assignee3" data-tokens="user3" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img6.jpg" alt="Image Description">
<span>Cameron Brown</span>
</span>'>
Cameron Brown
</option>
</select>
<!-- End Select -->
</div>
<div class="col-6 col-sm">
<label class="d-block small text-uppercase font-weight-medium">Choose project</label>
<!-- Select -->
<select class="js-select u-select u-select--right" title="Choose project"
data-width="100%"
data-style="btn-sm bg-transparent text-secondary font-weight-normal px-0"
data-live-search="true"
data-searchbox-classes="input-group-sm">
<option value="project1" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img11.jpg" alt="Image Description">
<span>Slack</span>
</span>'>
Slack
</option>
<option value="project2" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img12.jpg" alt="Image Description">
<span>DropBox</span>
</span>'>
DropBox
</option>
<option value="project3" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img13.jpg" alt="Image Description">
<span>Spotify</span>
</span>'>
Spotify
</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Status -->
<!-- Input -->
<div class="js-focus-state input-group u-form">
<textarea class="form-control u-form__input" rows="3" placeholder="Add a description" aria-label="Add a description"></textarea>
</div>
<!-- End Input -->
<hr class="my-4">
<!-- Assignee -->
<div class="row">
<div class="col-sm-5 mb-4 mb-sm-0">
<label class="d-block small text-uppercase font-weight-medium">Reporter</label>
<div class="media align-items-center">
<img class="u-sm-avatar rounded-circle mr-2" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h5 class="h6 font-weight-normal mb-0">Natalie Curtis</h5>
</div>
</div>
</div>
<div class="col-sm-7">
<label class="d-block small text-uppercase font-weight-medium">Followers</label>
<!-- Avatars -->
<ul class="list-inline mb-0">
<li class="list-inline-item mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Patrick Garner">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Amanta Owens">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img6.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="James Collins">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img7.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img8.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img9.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Sebastian Diaz">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a class="u-icon u-icon-light u-icon--sm rounded-circle" href="#">
<span class="u-icon__inner">+3</span>
</a>
</li>
</ul>
<!-- End Avatars -->
</div>
</div>
<!-- End Assignee -->
<hr class="my-4">
<!-- Details -->
<div class="row">
<div class="col-7 col-sm-5 mb-4 mb-sm-0">
<label class="d-block small text-uppercase font-weight-medium">Due date</label>
<!-- Datepicker -->
<div id="datepickerWrapperExample1" class="u-datepicker input-group input-group-sm u-form u-form--sm u-form--no-brd">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text min-width-3 text-success p-0 mr-2">
<span class="fa fa-calendar u-form__text-inner"></span>
</span>
</div>
<input class="js-range-datepicker form-control u-form__input bg-transparent py-1 px-0" type="text" placeholder="Due date" aria-label="Due date"
data-rp-wrapper="#datepickerWrapperExample1"
data-rp-date-format="d/m/Y">
</div>
<!-- End Datepicker -->
</div>
<div class="col-5 col-sm-3">
<label class="d-block small text-uppercase font-weight-medium">Priority</label>
<!-- Select -->
<select class="js-select u-select w-100" data-style="btn-sm bg-transparent font-weight-normal px-0">
<option value="priorityHighest" data-icon="fa fa-arrow-up text-danger font-size-13 mr-2">Highest</option>
<option value="priorityHigh" data-icon="fa fa-arrow-up text-danger font-size-13 mr-2">High</option>
<option value="priorityMedium" data-icon="fa fa-arrow-up text-warning font-size-13 mr-2" selected>Medium</option>
<option value="priorityLow" data-icon="fa fa-arrow-down text-success font-size-13 mr-2">Low</option>
<option value="priorityLowest" data-icon="fa fa-arrow-down text-success font-size-13 mr-2">Lowest</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Details -->
<hr class="my-4">
<!-- Label Input -->
<label class="d-block small text-uppercase font-weight-medium">Labels</label>
<div class="u-tagsinput">
<input type="text" value="HTML5, CSS3" data-role="tagsinput">
</div>
<!-- End Label Input -->
<hr class="my-4">
<!-- Comments -->
<div class="mb-3">
<label class="d-block small text-uppercase font-weight-medium">Comments</label>
<div class="media">
<img class="u-sm-avatar rounded-circle mr-2" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<div class="js-focus-state input-group u-form">
<textarea class="form-control u-form__input" rows="2" placeholder="Add a comment" aria-label="Add a comment"></textarea>
</div>
</div>
</div>
</div>
<!-- End Comments -->
<!-- Buttons -->
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-sm btn-primary u-btn-primary transition-3d-hover mr-1">Create Task</button>
<button type="submit" class="btn btn-sm u-btn-secondary--air transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
</div>
<!-- End Buttons -->
</div>
</form>
</div>
<!-- End Add Task Modal Window -->
CSS library:
<link rel="stylesheet" href="assets/vendor/animate.css">
<link rel="stylesheet" href="assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="assets/vendor/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="assets/vendor/bootstrap-tagsinput/css/bootstrap-tagsinput.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="assets/vendor/flatpickr/dist/flatpickr.min.js"></script>
<script src="assets/vendor/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.unfold.js"></script>
<script src="assets/js/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.selectpicker.js"></script>
<script src="assets/js/components/hs.modal-window.js"></script>
<script src="assets/js/components/hs.range-datepicker.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-add-project-window', {
autonomous: true
});
// initialization of custom select
$('.js-select').selectpicker();
// initialization of range datepicker
$.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
});
</script>
Create project modal #1
HTML:
<!-- Create Project Modal Trigger -->
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#addProjectModal"
data-modal-target="#addProjectModal"
data-overlay-color="#111722">
<span class="fa fa-plus font-size-13 mr-2"></span>
Create Project
</a>
<!-- End Create Project Modal Trigger -->
<!-- Create Project Modal Window -->
<div id="addProjectModal" class="js-add-project-window u-modal-window bg-transparent" style="width: 680px;">
<form class="bg-white rounded mb-9">
<!-- Header -->
<header class="row justify-content-between align-items-center no-gutters u-bg-light-blue-50 rounded-top py-3 px-5">
<div class="col-3">
<a class="small text-secondary" href="#">
<span class="fa fa-bookmark text-primary mr-1"></span>
FR-53
</a>
</div>
<div class="col-9 text-right">
<!-- Icons -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="#" data-toggle="tooltip" data-placement="top" title="Give feedback">
<span class="fa fa-bullhorn u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="#" data-toggle="tooltip" data-placement="top" title="Unwatch">
<span class="fa fa-eye-slash u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<!-- Settings Dropdown -->
<div class="position-relative">
<a id="createProjectSettingsDropdown1Invoker" class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="javascript:;" role="button"
aria-controls="createProjectSettingsDropdown1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#createProjectSettingsDropdown1"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="createProjectSettingsDropdown1" class="u-unfold right-0 text-left mt-2" aria-labelledby="createProjectSettingsDropdown1Invoker" style="min-width: 160px;">
<a class="u-list__link" href="#">Log time</a>
<a class="u-list__link" href="#">Add flag</a>
<a class="u-list__link" href="#">Move</a>
<a class="u-list__link" href="#">Clone</a>
</div>
</div>
<!-- End Settings Dropdown -->
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="javascript:;" onclick="Custombox.modal.close();">
<span class="fas fa-times u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Icons -->
</div>
</header>
<!-- End Header -->
<hr class="my-0">
<div class="pt-3 pb-5 px-5">
<!-- Project Title -->
<div class="d-sm-flex justify-content-sm-between align-items-sm-center no-gutters mb-3">
<div class="mb-1 mb-sm-0 mr-3">
<div class="input-group u-form u-form--no-brd">
<input class="form-control u-form__input pl-0" type="text" placeholder="Enter project title" aria-label="Enter project title">
</div>
</div>
<ul class="list-inline text-sm-right mb-0">
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm" href="#" data-toggle="tooltip" data-placement="top" title="Add attach">
<span class="fa fa-paperclip u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm" href="#" data-toggle="tooltip" data-placement="top" title="Create subtask">
<span class="fa fa-clone u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon-secondary--air u-icon--sm" href="#" data-toggle="tooltip" data-placement="top" title="Link issue">
<span class="fa fa-link u-icon__inner"></span>
</a>
</li>
</ul>
</div>
<!-- End Project Title -->
<!-- Status -->
<div class="row mx-gutters-2 mb-3">
<div class="col-sm-3 mb-3 mb-sm-0">
<label class="d-block small text-uppercase font-weight-medium">Status</label>
<!-- Select -->
<select class="js-select u-select"
data-width="100%"
data-style="u-btn-primary--air btn-sm">
<option value="toDo">To Do</option>
<option value="inProgress">In Progress</option>
<option value="done">Done</option>
</select>
<!-- End Select -->
</div>
<div class="col-6 col-sm">
<label class="d-block small text-uppercase font-weight-medium">Assignee</label>
<!-- Select -->
<select class="js-select u-select" title="Add assignee"
data-width="100%"
data-style="btn-sm bg-transparent text-secondary font-weight-normal px-0"
data-live-search="true"
data-searchbox-classes="input-group-sm">
<option value="assignee1" data-tokens="user1" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img9.jpg" alt="Image Description">
<span>Sebastian Diaz</span>
</span>'>
Sebastian Diaz
</option>
<option value="assignee2" data-tokens="user2" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img7.jpg" alt="Image Description">
<span>Eliza Donovan</span>
</span>'>
Eliza Donovan
</option>
<option value="assignee3" data-tokens="user3" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img6.jpg" alt="Image Description">
<span>Cameron Brown</span>
</span>'>
Cameron Brown
</option>
</select>
<!-- End Select -->
</div>
<div class="col-6 col-sm">
<label class="d-block small text-uppercase font-weight-medium">Choose project</label>
<!-- Select -->
<select class="js-select u-select u-select--right" title="Choose project"
data-width="100%"
data-style="btn-sm bg-transparent text-secondary font-weight-normal px-0"
data-live-search="true"
data-searchbox-classes="input-group-sm">
<option value="project1" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img11.jpg" alt="Image Description">
<span>Slack</span>
</span>'>
Slack
</option>
<option value="project2" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img12.jpg" alt="Image Description">
<span>DropBox</span>
</span>'>
DropBox
</option>
<option value="project3" data-content='
<span class="d-flex align-items-center">
<img class="u-xs-avatar rounded-circle mr-2" src="../assets/img/32x32/img13.jpg" alt="Image Description">
<span>Spotify</span>
</span>'>
Spotify
</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Status -->
<!-- Input -->
<div class="js-focus-state input-group u-form">
<textarea class="form-control u-form__input" rows="3" placeholder="Add a description" aria-label="Add a description"></textarea>
</div>
<!-- End Input -->
<hr class="my-4">
<!-- Assignee -->
<div class="row">
<div class="col-sm-5 mb-4 mb-sm-0">
<label class="d-block small text-uppercase font-weight-medium">Reporter</label>
<div class="media align-items-center">
<img class="u-sm-avatar rounded-circle mr-2" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h5 class="h6 font-weight-normal mb-0">Natalie Curtis</h5>
</div>
</div>
</div>
<div class="col-sm-7">
<label class="d-block small text-uppercase font-weight-medium">Followers</label>
<!-- Avatars -->
<ul class="list-inline mb-0">
<li class="list-inline-item mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Patrick Garner">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Amanta Owens">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img6.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="James Collins">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img7.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img8.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a href="#">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img9.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Sebastian Diaz">
</a>
</li>
<li class="list-inline-item ml-offset-3 mb-1 mr-0">
<a class="u-icon u-icon-light u-icon--sm rounded-circle" href="#">
<span class="u-icon__inner">+3</span>
</a>
</li>
</ul>
<!-- End Avatars -->
</div>
</div>
<!-- End Assignee -->
<hr class="my-4">
<!-- Details -->
<div class="row justify-content-between">
<div class="col-6 col-sm-4 mb-4 mb-sm-0">
<label class="d-block small text-uppercase font-weight-medium">Due date</label>
<!-- Datepicker -->
<div id="datepickerWrapperExample2" class="u-datepicker input-group input-group-sm u-form u-form--sm u-form--no-brd">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text min-width-3 text-success p-0 mr-2">
<span class="fa fa-calendar u-form__text-inner"></span>
</span>
</div>
<input class="js-range-datepicker form-control u-form__input bg-transparent py-1 px-0" type="text" placeholder="Due date" aria-label="Due date"
data-rp-wrapper="#datepickerWrapperExample2"
data-rp-date-format="d/m/Y">
</div>
<!-- End Datepicker -->
</div>
<div class="col-6 col-sm-4 mb-4 mb-sm-0">
<label class="d-block small text-uppercase font-weight-medium">Priority</label>
<!-- Select -->
<select class="js-select u-select w-100" data-style="btn-sm bg-transparent font-weight-normal px-0">
<option value="priorityHighest" data-icon="fa fa-arrow-up text-danger font-size-13 mr-2">Highest</option>
<option value="priorityHigh" data-icon="fa fa-arrow-up text-danger font-size-13 mr-2">High</option>
<option value="priorityMedium" data-icon="fa fa-arrow-up text-warning font-size-13 mr-2" selected>Medium</option>
<option value="priorityLow" data-icon="fa fa-arrow-down text-success font-size-13 mr-2">Low</option>
<option value="priorityLowest" data-icon="fa fa-arrow-down text-success font-size-13 mr-2">Lowest</option>
</select>
<!-- End Select -->
</div>
<div class="col-sm-4">
<label class="d-block small text-uppercase font-weight-medium">Budget</label>
<div class="input-group input-group-sm u-form u-form--sm u-form--no-brd">
<input class="form-control u-form__input p-0" type="text" placeholder="Project budget" aria-label="Project budget">
</div>
</div>
</div>
<!-- End Details -->
<hr class="my-4">
<!-- Label Input -->
<label class="d-block small text-uppercase font-weight-medium">Labels</label>
<div class="u-tagsinput">
<input type="text" value="HTML5, CSS3" data-role="tagsinput">
</div>
<!-- End Label Input -->
<hr class="my-4">
<!-- Comments -->
<div class="mb-3">
<label class="d-block small text-uppercase font-weight-medium">Comments</label>
<div class="media">
<img class="u-sm-avatar rounded-circle mr-2" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<div class="js-focus-state input-group u-form">
<textarea class="form-control u-form__input" rows="2" placeholder="Add a comment" aria-label="Add a comment"></textarea>
</div>
</div>
</div>
</div>
<!-- End Comments -->
<!-- Buttons -->
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-sm btn-primary u-btn-primary transition-3d-hover mr-1">Save</button>
<button type="submit" class="btn btn-sm u-btn-secondary--air transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
</div>
<!-- End Buttons -->
</div>
</form>
</div>
<!-- End Create Project Modal Window -->
CSS library:
<link rel="stylesheet" href="assets/vendor/animate.css">
<link rel="stylesheet" href="assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="assets/vendor/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="assets/vendor/bootstrap-tagsinput/css/bootstrap-tagsinput.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="assets/vendor/flatpickr/dist/flatpickr.min.js"></script>
<script src="assets/vendor/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.unfold.js"></script>
<script src="assets/js/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.selectpicker.js"></script>
<script src="assets/js/components/hs.modal-window.js"></script>
<script src="assets/js/components/hs.range-datepicker.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-add-project-window', {
autonomous: true
});
// initialization of select picker
$.HSCore.components.HSSelectPicker.init('.js-select');
// initialization of range datepicker
$.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
});
</script>
Add members modal #1
Add Members
Add members
HTML:
<!-- Add Members Modal Trigger -->
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#addMembersModal"
data-modal-target="#addMembersModal"
data-overlay-color="#111722">
<span class="fa fa-plus font-size-13 mr-2"></span>
Add Members
</a>
<!-- End Add Members Modal Trigger -->
<!-- Add Members Modal Window -->
<div id="addMembersModal" class="js-add-members-window u-modal-window bg-transparent" style="width: 540px;">
<div class="bg-white rounded mb-9">
<!-- Header -->
<header class="d-flex justify-content-between align-items-center u-bg-light-blue-50 rounded-top py-3 px-5">
<h3 class="h6 mb-0">Add members</h3>
<button class="btn btn-xs u-btn--icon u-btn-text-secondary" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
</header>
<!-- End Header -->
<hr class="my-0">
<form class="p-5">
<!-- Add Members -->
<div class="js-focus-state input-group u-form mb-4">
<input class="form-control u-form__input" type="email" placeholder="Enter email address" aria-label="Enter email address">
<div class="input-group-append">
<button type="button" class="btn btn-primary u-btn-primary">Add Member</button>
</div>
</div>
<!-- End Add Members -->
<!-- Members List -->
<div class="mb-4">
<!-- Invitation List -->
<div class="d-sm-flex justify-content-sm-between align-items-sm-center u-info-v2 rounded p-2 mb-2">
<div class="media align-items-center mb-3 mb-sm-0">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img9.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Patrick Garner</h4>
<small class="d-block text-secondary">patrickgarner@gmail.com</small>
</div>
</div>
<span class="u-label u-label--sm u-label--success u-label--rounded">Admin</span>
</div>
<!-- End Invitation List -->
<!-- Invitation List -->
<div class="d-sm-flex justify-content-sm-between align-items-sm-center u-info-v2 rounded p-2 mb-2">
<div class="media align-items-center mb-3 mb-sm-0">
<span class="u-icon u-icon-danger--air u-icon--md rounded-circle mr-3">
<span class="u-icon__inner">AO</span>
</span>
<div class="media-body">
<h4 class="h6 mb-0">Amanta Owens</h4>
<small class="d-block text-secondary">amantaowens@gmail.com</small>
</div>
</div>
<button type="button" class="btn btn-xs u-btn-primary--air transition-3d-hover">Add</button>
</div>
<!-- End Invitation List -->
<!-- Invitation List -->
<div class="d-sm-flex justify-content-sm-between align-items-sm-center u-info-v2 rounded p-2 mb-2">
<div class="media align-items-center mb-3 mb-sm-0">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img8.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Sebastian Diaz</h4>
<small class="d-block text-secondary">sebastiandiaz@gmail.com</small>
</div>
</div>
<button type="button" class="btn btn-xs u-btn-primary--air transition-3d-hover">Add</button>
</div>
<!-- End Invitation List -->
<!-- Invitation List -->
<div class="d-sm-flex justify-content-sm-between align-items-sm-center u-info-v2 rounded p-2 mb-2">
<div class="media align-items-center mb-3 mb-sm-0">
<span class="u-icon u-icon-success--air u-icon--md rounded-circle mr-3">
<span class="u-icon__inner">CL</span>
</span>
<div class="media-body">
<h4 class="h6 mb-0">Cler Lockhart</h4>
<small class="d-block text-secondary">clerlockhart@gmail.com</small>
</div>
</div>
<button type="button" class="btn btn-xs u-btn-primary--air transition-3d-hover">Add</button>
</div>
<!-- End Invitation List -->
<!-- Invitation List -->
<div class="d-sm-flex justify-content-sm-between align-items-sm-center u-info-v2 rounded p-2 mb-2">
<div class="media align-items-center mb-3 mb-sm-0">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img12.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Joseph Mack</h4>
<small class="d-block text-secondary">josephmack@gmail.com</small>
</div>
</div>
<button type="button" class="btn btn-xs u-btn-primary--air transition-3d-hover">Add</button>
</div>
<!-- End Invitation List -->
<!-- Invitation List -->
<div class="d-sm-flex justify-content-sm-between align-items-sm-center u-info-v2 rounded p-2 mb-2">
<div class="media align-items-center mb-3 mb-sm-0">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img10.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Eliza Donovan</h4>
<small class="d-block text-secondary">eliz@gmail.com</small>
</div>
</div>
<button type="button" class="btn btn-xs u-btn-primary--air transition-3d-hover">Add</button>
</div>
<!-- End Invitation List -->
</div>
<!-- End Members List -->
<!-- Buttons -->
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-sm btn-primary u-btn-primary transition-3d-hover mr-1">Save</button>
<button type="submit" class="btn btn-sm u-btn-secondary--air transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
</div>
<!-- End Buttons -->
</form>
</div>
</div>
<!-- End Add Members Modal Window -->
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/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-add-members-window', {
autonomous: true
});
});
</script>
Enable two step verification modal #1
Enable Two-step Verification
Verify phone number
HTML:
<!-- Two-step Verification Modal Trigger -->
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#twoStepVerificationModal"
data-modal-target="#twoStepVerificationModal"
data-overlay-color="#111722">
<span class="fa fa-plus font-size-13 mr-2"></span>
Enable Two-step Verification
</a>
<!-- End Two-step Verification Modal Trigger -->
<!-- Two-Step Verification Modal Window -->
<div id="twoStepVerificationModal" class="js-two-step-verification-window u-modal-window u-modal-window--payment rounded">
<!-- Modal Close Button -->
<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>
<!-- End Modal Close Button -->
<header class="u-bg-light-blue-50 rounded-top py-3 px-5">
<h3 class="h6 mb-0">Verify phone number</h3>
</header>
<hr class="my-0">
<form class="js-validate">
<div class="p-5">
<!-- Input Group -->
<div class="mb-4">
<label class="h6 small d-block text-uppercase mb-2">
Choose country
</label>
<div class="js-form-message">
<div class="js-focus-state input-group u-form">
<select class="custom-select">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US" selected>United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<label class="h6 small d-block text-uppercase mb-2">
Phone number
</label>
<div class="js-form-message">
<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="u-form__text-inner">+01</span>
</span>
</div>
<input class="form-control u-form__input" type="text" name="name" required
placeholder="Phone number"
aria-label="Phone number"
data-msg="Please enter a valid phone number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input Group -->
</div>
<hr class="my-0">
<!-- Buttons -->
<div class="d-flex justify-content-end py-3 px-5">
<button type="submit" class="btn btn-sm btn-primary u-btn-primary transition-3d-hover mr-1">Next</button>
<button type="submit" class="btn btn-sm u-btn-secondary--air transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
</div>
<!-- End Buttons -->
</form>
</div>
<!-- End Two-Step Verification Modal Window -->
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/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-two-step-verification-window', {
autonomous: true
});
});
</script>
Add payment modal #1
Add Payment
Create a new payment
HTML:
<!-- Add Payment Modal Trigger -->
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#addPaymentModal"
data-modal-target="#addPaymentModal"
data-overlay-color="#111722">
<span class="fa fa-plus font-size-13 mr-2"></span>
Add Payment
</a>
<!-- End Add Payment Modal Trigger -->
<!-- Account Modal Window -->
<div id="addPaymentModal" class="js-add-payment-window u-modal-window bg-transparent" style="width: 480px;">
<div class="bg-white rounded">
<!-- Header -->
<header class="d-flex justify-content-between align-items-center u-bg-light-blue-50 rounded-top py-3 px-5">
<h3 class="h6 mb-0">Create a new payment</h3>
<button class="btn btn-xs u-btn--icon u-btn-text-secondary" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
</header>
<!-- End Header -->
<hr class="my-0">
<form class="js-validate">
<div class="p-5">
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label class="h6 small d-block text-uppercase mb-0">
Currency
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="js-focus-state input-group u-form">
<select class="custom-select custom-select-sm">
<option value="currencySelectUSD">USD - US Dollar</option>
<option value="currencySelectAED">AED - United Arab Emirates Dirham</option>
<option value="currencySelectAFN">AFN - Afghan Afghani</option>
<option value="currencySelectALL">ALL - Albanian Lek</option>
<option value="currencySelectAMD">AMD - Armenian Dram</option>
<option value="currencySelectANG">ANG - Netherlands Antillean Guilder</option>
<option value="currencySelectAOA">AOA - Angolan Kwanza</option>
<option value="currencySelectARS">ARS - Argentine Peso</option>
<option value="currencySelectAUD">AUD - Australian Dollar</option>
<option value="currencySelectAWG">AWG - Aruban Florin</option>
<option value="currencySelectAZN">AZN - Azerbaijani Manat</option>
<option value="currencySelectBAM">BAM - Bosnia-Herzegovina Convertible Mark</option>
<option value="currencySelectBBD">BBD - Barbadian Dollar</option>
<option value="currencySelectBDT">BDT - Bangladeshi Taka</option>
<option value="currencySelectBGN">BGN - Bulgarian Lev</option>
<option value="currencySelectBIF">BIF - Burundian Franc</option>
<option value="currencySelectBMD">BMD - Bermudan Dollar</option>
<option value="currencySelectBND">BND - Brunei Dollar</option>
<option value="currencySelectBOB">BOB - Bolivian Boliviano</option>
<option value="currencySelectBRL">BRL - Brazilian Real</option>
<option value="currencySelectBSD">BSD - Bahamian Dollar</option>
<option value="currencySelectBWP">BWP - Botswanan Pula</option>
<option value="currencySelectBZD">BZD - Belize Dollar</option>
<option value="currencySelectCAD">CAD - Canadian Dollar</option>
<option value="currencySelectCDF">CDF - Congolese Franc</option>
<option value="currencySelectCHF">CHF - Swiss Franc</option>
<option value="currencySelectCLP">CLP - Chilean Peso</option>
<option value="currencySelectCNY">CNY - Chinese Yuan</option>
<option value="currencySelectCOP">COP - Colombian Peso</option>
<option value="currencySelectCRC">CRC - Costa Rican Colón</option>
<option value="currencySelectCVE">CVE - Cape Verdean Escudo</option>
<option value="currencySelectCZK">CZK - Czech Koruna</option>
<option value="currencySelectDJF">DJF - Djiboutian Franc</option>
<option value="currencySelectDKK">DKK - Danish Krone</option>
<option value="currencySelectDOP">DOP - Dominican Peso</option>
<option value="currencySelectDZD">DZD - Algerian Dinar</option>
<option value="currencySelectEGP">EGP - Egyptian Pound</option>
<option value="currencySelectETB">ETB - Ethiopian Birr</option>
<option value="currencySelectEUR">EUR - Euro</option>
<option value="currencySelectFJD">FJD - Fijian Dollar</option>
<option value="currencySelectFKP">FKP - Falkland Islands Pound</option>
<option value="currencySelectGBP">GBP - British Pound</option>
<option value="currencySelectGEL">GEL - Georgian Lari</option>
<option value="currencySelectGIP">GIP - Gibraltar Pound</option>
<option value="currencySelectGMD">GMD - Gambian Dalasi</option>
<option value="currencySelectGNF">GNF - Guinean Franc</option>
<option value="currencySelectGTQ">GTQ - Guatemalan Quetzal</option>
<option value="currencySelectGYD">GYD - Guyanaese Dollar</option>
<option value="currencySelectHKD">HKD - Hong Kong Dollar</option>
<option value="currencySelectHNL">HNL - Honduran Lempira</option>
<option value="currencySelectHRK">HRK - Croatian Kuna</option>
<option value="currencySelectHTG">HTG - Haitian Gourde</option>
<option value="currencySelectHUF">HUF - Hungarian Forint</option>
<option value="currencySelectIDR">IDR - Indonesian Rupiah</option>
<option value="currencySelectILS">ILS - Israeli New Shekel</option>
<option value="currencySelectINR">INR - Indian Rupee</option>
<option value="currencySelectISK">ISK - Icelandic Króna</option>
<option value="currencySelectJMD">JMD - Jamaican Dollar</option>
<option value="currencySelectJPY">JPY - Japanese Yen</option>
<option value="currencySelectKES">KES - Kenyan Shilling</option>
<option value="currencySelectKGS">KGS - Kyrgystani Som</option>
<option value="currencySelectKHR">KHR - Cambodian Riel</option>
<option value="currencySelectKMF">KMF - Comorian Franc</option>
<option value="currencySelectKRW">KRW - South Korean Won</option>
<option value="currencySelectKYD">KYD - Cayman Islands Dollar</option>
<option value="currencySelectKZT">KZT - Kazakhstani Tenge</option>
<option value="currencySelectLAK">LAK - Laotian Kip</option>
<option value="currencySelectLBP">LBP - Lebanese Pound</option>
<option value="currencySelectLKR">LKR - Sri Lankan Rupee</option>
<option value="currencySelectLRD">LRD - Liberian Dollar</option>
<option value="currencySelectLSL">LSL - Lesotho Loti</option>
<option value="currencySelectMAD">MAD - Moroccan Dirham</option>
<option value="currencySelectMDL">MDL - Moldovan Leu</option>
<option value="currencySelectMGA">MGA - Malagasy Ariary</option>
<option value="currencySelectMKD">MKD - Macedonian Denar</option>
<option value="currencySelectMMK">MMK - Myanmar Kyat</option>
<option value="currencySelectMNT">MNT - Mongolian Tugrik</option>
<option value="currencySelectMOP">MOP - Macanese Pataca</option>
<option value="currencySelectMRO">MRO - Mauritanian Ouguiya</option>
<option value="currencySelectMUR">MUR - Mauritian Rupee</option>
<option value="currencySelectMVR">MVR - Maldivian Rufiyaa</option>
<option value="currencySelectMWK">MWK - Malawian Kwacha</option>
<option value="currencySelectMXN">MXN - Mexican Peso</option>
<option value="currencySelectMYR">MYR - Malaysian Ringgit</option>
<option value="currencySelectMZN">MZN - Mozambican Metical</option>
<option value="currencySelectNAD">NAD - Namibian Dollar</option>
<option value="currencySelectNGN">NGN - Nigerian Naira</option>
<option value="currencySelectNIO">NIO - Nicaraguan Córdoba</option>
<option value="currencySelectNOK">NOK - Norwegian Krone</option>
<option value="currencySelectNPR">NPR - Nepalese Rupee</option>
<option value="currencySelectNZD">NZD - New Zealand Dollar</option>
<option value="currencySelectPAB">PAB - Panamanian Balboa</option>
<option value="currencySelectPEN">PEN - Peruvian Sol</option>
<option value="currencySelectPGK">PGK - Papua New Guinean Kina</option>
<option value="currencySelectPHP">PHP - Philippine Peso</option>
<option value="currencySelectPKR">PKR - Pakistani Rupee</option>
<option value="currencySelectPLN">PLN - Polish Zloty</option>
<option value="currencySelectPYG">PYG - Paraguayan Guarani</option>
<option value="currencySelectQAR">QAR - Qatari Rial</option>
<option value="currencySelectRON">RON - Romanian Leu</option>
<option value="currencySelectRSD">RSD - Serbian Dinar</option>
<option value="currencySelectRUB">RUB - Russian Ruble</option>
<option value="currencySelectRWF">RWF - Rwandan Franc</option>
<option value="currencySelectSAR">SAR - Saudi Riyal</option>
<option value="currencySelectSBD">SBD - Solomon Islands Dollar</option>
<option value="currencySelectSCR">SCR - Seychellois Rupee</option>
<option value="currencySelectSEK">SEK - Swedish Krona</option>
<option value="currencySelectSGD">SGD - Singapore Dollar</option>
<option value="currencySelectSHP">SHP - St. Helena Pound</option>
<option value="currencySelectSLL">SLL - Sierra Leonean Leone</option>
<option value="currencySelectSOS">SOS - Somali Shilling</option>
<option value="currencySelectSRD">SRD - Surinamese Dollar</option>
<option value="currencySelectSTD">STD - São Tomé & Príncipe Dobra</option>
<option value="currencySelectSVC">SVC - Salvadoran Colón</option>
<option value="currencySelectSZL">SZL - Swazi Lilangeni</option>
<option value="currencySelectTHB">THB - Thai Baht</option>
<option value="currencySelectTJS">TJS - Tajikistani Somoni</option>
<option value="currencySelectTOP">TOP - Tongan Paʻanga</option>
<option value="currencySelectTRY">TRY - Turkish Lira</option>
<option value="currencySelectTTD">TTD - Trinidad & Tobago Dollar</option>
<option value="currencySelectTWD">TWD - New Taiwan Dollar</option>
<option value="currencySelectTZS">TZS - Tanzanian Shilling</option>
<option value="currencySelectUAH">UAH - Ukrainian Hryvnia</option>
<option value="currencySelectUGX">UGX - Ugandan Shilling</option>
<option value="currencySelectUYU">UYU - Uruguayan Peso</option>
<option value="currencySelectUZS">UZS - Uzbekistani Som</option>
<option value="currencySelectVND">VND - Vietnamese Dong</option>
<option value="currencySelectVUV">VUV - Vanuatu Vatu</option>
<option value="currencySelectWST">WST - Samoan Tala</option>
<option value="currencySelectXAF">XAF - Central African CFA Franc</option>
<option value="currencySelectXCD">XCD - East Caribbean Dollar</option>
<option value="currencySelectXOF">XOF - West African CFA Franc</option>
<option value="currencySelectXPF">XPF - CFP Franc</option>
<option value="currencySelectYER">YER - Yemeni Rial</option>
<option value="currencySelectZAR">ZAR - South African Rand</option>
<option value="currencySelectZMW">ZMW - Zambian Kwacha</option>
</select>
</div>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label class="h6 small d-block text-uppercase mb-0">
Amount
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="js-focus-state input-group input-group-sm u-form u-form--sm">
<input class="form-control u-form__input" type="text" name="amount" required
placeholder="$ 0.00"
aria-label="$ 0.00"
data-msg="Please enter a valid amount."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label class="h6 small d-block text-uppercase mb-0">
Card number
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="js-focus-state input-group input-group-sm u-form u-form--sm">
<input class="form-control u-form__input" type="number" name="cardNumber" required
placeholder="Card number"
aria-label="Card number"
data-msg="Please enter a valid card number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label class="h6 small d-block text-uppercase mb-0">
Cardholder name
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="js-focus-state input-group input-group-sm u-form u-form--sm">
<input class="form-control u-form__input" type="text" name="cardholderName" required
placeholder="Cardholder name"
aria-label="Cardholder name"
data-msg="Please enter a valid cardholder name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label class="h6 small d-block text-uppercase mb-0">
Expires
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="js-focus-state input-group input-group-sm u-form u-form--sm">
<input class="form-control u-form__input" type="number" name="expires" required
placeholder="MM/YY"
aria-label="MM/YY"
data-msg="Please enter a valid date."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-0">
<div class="col-4 text-right">
<label class="h6 small d-block text-uppercase mb-0">
<span class="fa fa-info-circle" data-toggle="tooltip" data-placement="left" title="If you have a Visa or Mastercard branded credit or debit card, it'll be a 3 digit number located on the back of your card."></span>
CVC
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="js-focus-state input-group input-group-sm u-form u-form--sm">
<input class="form-control u-form__input" type="number" name="cvc" required
placeholder="***"
aria-label="***"
data-msg="Please enter a valid code."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
</div>
<hr class="my-0">
<!-- Buttons -->
<div class="d-flex justify-content-end py-3 px-5">
<button type="submit" class="btn btn-sm btn-primary u-btn-primary transition-3d-hover mr-1">Create Payment</button>
<button type="submit" class="btn btn-sm u-btn-secondary--air transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
</div>
<!-- End Buttons -->
</form>
</div>
</div>
<!-- End Account Modal Window -->
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/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-add-payment-window', {
autonomous: true
});
});
</script>