<div class="wrapper-alert">
<div class="alert-popup red js--clickable">
<a href="#" class="close"><span class="icon fal fa-times fa-2x " aria-hidden="true"></span></a>
<div class="uhasselt-container">
<span class="icon fal fa-exclamation-triangle fa-lg " aria-hidden="true"></span>
<span class="text">
<h6 class="heading ">
This is the alert title
</h6>
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
</div>
</span>
<a href="https://www.google.nl" class="js--main-link">
<span class="icon fal fa-chevron-right fa-lg " aria-hidden="true"></span>
</a>
</div>
<picture class="picture ">
<img class="picture-image " src="//placehold.co/480x264" alt="">
</picture>
<div class="extra-info">
<h2 class="heading ">
The quick brown fox jumps over the lazy dog
</h2>
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
</div>
<div>
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="wrapper-alert">
<div class="alert-popup {{modifier}} {{#if isLink}}js--clickable{{/if}}">
<a href="#" class="close">{{ render '@icon' @root.icon-close }}</a>
<div class="uhasselt-container">
{{ render '@icon' @root.icon-alert }}
<span class="text">
{{ render '@heading' @root.heading }}
{{ render '@paragraph' @root.paragraph }}
</span>
{{#if isLink}}
<a href="{{url}}" class="js--main-link" {{#if isExternal}}target="_blank" rel="noopener noreferrer"{{/if}}>
{{ render '@icon' @root.icon-chev }}
</a>
{{/if}}
</div>
{{render '@image' image}}
<div class="extra-info">
{{render '@heading--h2'}}
{{render '@paragraph' @root.paragraph}}
<div>
{{render '@button' button merge=true}}
</div>
</div>
</div>
</div>
{
"heading": {
"text": "This is the alert title",
"tag": "h6"
},
"paragraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue."
},
"icon-chev": {
"style": "fal",
"icon": "fa-chevron-right",
"size": "fa-lg"
},
"icon-alert": {
"style": "fal",
"icon": "fa-exclamation-triangle",
"size": "fa-lg"
},
"icon-close": {
"style": "fal",
"icon": "fa-times",
"size": "fa-2x"
},
"isLink": true,
"url": "https://www.google.nl",
"isExternalLink": false,
"image": {
"src": "//placehold.co/480x264"
},
"button": {
"modifier": "black"
},
"modifier": "red"
}
.wrapper-alert {
@apply bg-black bg-opacity-70 w-full absolute -top-48 bottom-0 right-0 left-0 z-[100000] hidden;
height: calc(100% + 192px);
.alert-popup {
@apply mt-24 md:mt-48 mx-auto relative;
@apply text-white max-w-lg;
.close {
@apply absolute right-4 md:right-0 -top-10;
}
.uhasselt-container {
@apply flex items-center px-8 py-4;
.text {
@apply px-8 w-full;
h6 {
@apply font-semibold;
}
}
.icon {
@apply text-white;
transition: all 0.3s ease;
}
}
.picture {
@apply w-auto;
img {
@apply w-full;
}
}
.extra-info {
@apply p-8 bg-white text-black;
.paragraph {
@apply mb-8;
}
}
&.red {
@apply bg-red-600;
&:hover {
@apply bg-red-700;
}
}
&.black {
@apply bg-black;
&:hover {
@apply bg-black-800;
}
.button.button-black {
.icon {
@apply text-white;
}
}
}
&.white {
@apply bg-white text-black border border-solid border-gray;
.icon {
@apply text-red;
}
&:hover {
@apply bg-gray-400;
}
.button .icon {
@apply text-white;
}
}
&.js--clickable {
cursor: pointer;
}
&:hover {
@apply no-underline;
.fa-chevron-right {
transform: translateX(5px);
}
}
}
}
$(document).ready(function () {
'use strict';
var $alertPopup = $('.wrapper-alert');
if ($alertPopup) {
let popupId = "alert-popup-" + $alertPopup.attr('id');
let popupCookieValue = getCookie(popupId);
if (popupCookieValue == "") {
$alertPopup.fadeIn(250);
let $alertPopupCloseButton = $('.alert-popup a.close');
if ($alertPopupCloseButton ) {
$alertPopupCloseButton.on('click', function (e) {
e.preventDefault();
$alertPopup.fadeOut(250);
if (popupCookieValue == "") {
setCookie(popupId, "true", 365);
}
});
}
}
}
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
});
No notes defined.