Hey there,
I’m currently building my first Unbounce HTML carrousel.
I have a couple of CTA that should close the pop-up by clicking on it, but I can’t find how to set up my JS/HTML to do so.
Here is my HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Carousel Modal</title>
<!--
Instructions:
[ ] Copy this HTML into the Unbounce Carousel Modal (desktop width 700, height: 560px / mobile width 320)
[ ] Upload and swap out all images (eg: https://via.placeholder.com/600x565 -> your new image URL)
[ ] Change text on each slide/page
[ ] Change the `href="#"` to `href="https://your-link" or `href="your://deeplink"`
[ ] Change button text
-->
<style>
/* fonts */
@font-face {
font-family: 'Silka';
font-style: normal;
font-weight: 300;
src: url(https://cdn.braze.eu/appboy/communication/assets/font_assets/files/62d16cf831a92112b9a405ed/original.woff2?1657892088) format('woff2');
}
@font-face {
font-family: 'Silka';
font-style: normal;
font-weight: 400;
src: url(https://cdn.braze.eu/appboy/communication/assets/font_assets/files/62d161a4e0005464d6fa7141/original.woff2?1657889188) format('woff2');
}
@font-face {
font-family: 'Silka';
font-style: normal;
font-weight: 600;
src: url(https://cdn.braze.eu/appboy/communication/assets/font_assets/files/62d161a4e000544482fa69e9/original.woff2?1657889188) format('woff2');
}
:root {
--header-font-stack: "Silka", helvetica, arial, sans-serif;
--body-font-stack: "Silka", helvetica, arial, sans-serif;
}
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/* Set core body defaults */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
list-style: none;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img {
max-width: 100%;
display: block;
}
/* Natural flow and rhythm in articles by default */
article > * + * {
margin-top: 1em;
}
/* Inherit fonts for inputs and buttons */
input,
button,
a,
textarea,
select {
font: inherit;
}
button,
a {
border: none;
background-color: transparent;
text-decoration: none;
}
button:focus,
a {
outline: none;
}
.modal__slide {
display: flex;
flex-direction: row;
height: auto;
width:100%;
margin: auto;
position: relative;
border-radius: 8px 8px 8px 8px;
}
.modal__image {
height: 330px;
flex-basis: 350px;
background-size: cover;
background-repeat: no-repeat;
background-position: center right;
border-radius: 8px 0px 0px 0px;
}
.modal__content {
display: flex;
flex-direction: column;
position: relative;
height: 330px;
max-width:400px;
flex-basis: auto;
padding: 12px 36px 0px 36px;
align-items: left;
justify-content: center;
border-radius: 0px 8px 0px 0px;
}
.modal__title {
margin-bottom: 25px;
font-family: var(--header-font-stack);
font-weight: 400;
font-size: 26px;
line-height: 30px;
color: #000000;
text-align:left;
}
.modal__text {
margin-bottom: 40px;
font-family: var(--body-font-stack);
font-size: 14px;
color: #101b24;
line-height: 1.5;
text-align: left;
}
.modal__btn{
margin-bottom: 15px;
font-family: var(--body-font-stack);
font-size: 14px;
color: #101b24;
line-height: 1.5;
text-align: left;
font-weight:600;
}
.modal__carousel-toggle {
display: flex;
justify-content: center;
align-items: center;
padding: 6px;
overflow: hidden;
background-color: transparent;
}
.modal__carousel-toggle button,
.modal__carousel-toggle a {
height: 24px;
cursor: pointer;
}
.modal__carousel-navigation {
display: inline-block;
height: 2px;
width: 46px;
margin-right: 5px;
margin-left: 5px;
border-radius: 2px;
background-color: #8F9BA2;
}
.modal__carousel-navigation.is-active {
background-color: #000000;
}
/* Dark Mode Switch*/
@media (prefers-color-scheme: dark) {
.modal__slide, .modal__content {
background: black;
}
.modal__title {
color:#FFFFFF;
}
.modal__text {
color:#EFEFEF;
}
.modal__btn {
color: #ffffff;
}
.modal__btn--choice {
background-color:#008080;
color: #ffffff;
border:1px solid #008080;
}
}
@media (prefers-color-scheme: light) {
.modal__content {
background: white;
}
.modal__title {
color:#000000;
}
.modal__text {
color:#101b24;
}
}
/*Phones*/
@media (max-width: 600px) {
.modal__slide {
display: flex;
flex-direction: column;
height: auto;
width:100%;
margin: auto;
position: relative;
border-radius: 8px 8px 8px 8px;
}
.modal__image {
height: 280px;
flex-basis: 230px;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
border-radius: 8px 8px 0px 0px;
}
.modal__content {
display: flex;
flex-direction: column;
height: 280px;
max-width:350px;
flex-basis: auto;
padding: 12px 36px 0px 36px;
align-items: left;
justify-content: center;
border-radius: 0px 0px 0px 0px;
}
.modal__title {
font-size: 22px;
line-height: 24px;
}
.modal__text {
margin-bottom: 15px;
font-family: var(--body-font-stack);
font-size: 12px;
line-height: 1.5;
text-align: left;
}
}
</style>
</head>
<body>
<div class="overlay">
<div class="modal">
<div class="siema">
<!-- first page -->
<div class="modal__slide">
<div class="modal__image" style="background-image: url('https://via.placeholder.com/600x565');">
</div>
<div class="modal__content">
<h1 class="modal__title">T1</h1>
<p class="modal__text">
T2
</p>
<div class="modal__button">
<a class="modal__btn" onclick="appboyBridge.closeMessage()" >
CLOSE <svg width="16px" height="16px" viewBox="0 -3 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="modal__carousel-toggle">
<button class="prev" type="button">
<svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.894332 5.86154L5.28285 10.1129C5.58294 10.4067 6.07343 10.4067 6.37673 10.1129L7.10602 9.4064C7.40932 9.11569 7.40932 8.64054 7.10602 8.34669L3.99532 5.33327L7.10602 2.31982C7.40932 2.02911 7.40932 1.55395 7.10602 1.2601L6.37673 0.553642C6.07664 0.259789 5.58615 0.259789 5.28285 0.553642L0.894332 4.80497C0.590995 5.09882 0.590995 5.57394 0.894332 5.86154Z"
/>
</svg>
</button>
<span class="modal__carousel-navigation js-slide-toggle is-active" id="js-slide-one-toggle"></span>
<span class="modal__carousel-navigation js-slide-toggle" id="js-slide-two-toggle"></span>
<span class="modal__carousel-navigation js-slide-toggle" id="js-slide-three-toggle"></span>
<button class="next" type="button">
<svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.10591 4.80497L2.7174 0.553642C2.41731 0.259789 1.92682 0.259789 1.62351 0.553642L0.894227 1.2601C0.590922 1.55081 0.590922 2.02596 0.894227 2.31982L4.00492 5.33324L0.894227 8.34669C0.590922 8.6374 0.590922 9.11255 0.894227 9.4064L1.62351 10.1129C1.9236 10.4067 2.41409 10.4067 2.7174 10.1129L7.10591 5.86154C7.40925 5.56768 7.40925 5.09256 7.10591 4.80497Z"
/>
</svg>
</button>
</div>
</div>
</div>
<!-- siema.min.js -->
<script src="https://appboy-images.com/appboy/communication/assets/code_assets/files/5f2d589683566823fc373ec4/original.js?1596807318"></script>
<script>
const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
const slideOneToggle = document.getElementById("js-slide-one-toggle");
const slideTwoToggle = document.getElementById("js-slide-two-toggle");
const slideThreeToggle = document.getElementById("js-slide-three-toggle");
const slideFourToggle = document.getElementById("js-slide-four-toggle");
const slideFiveToggle = document.getElementById("js-slide-five-toggle");
const slideSixToggle = document.getElementById("js-slide-six-toggle");
const slideSixBToggle = document.getElementById("js-slide-sixb-toggle");
const slideSixCToggle = document.getElementById("js-slide-sixc-toggle");
const slideToggles = document.querySelectorAll(".js-slide-toggle");
const mySiema = new Siema({
duration: 450,
loop: true,
onChange: () => updateCurrentSlideState(),
});
setInterval(() => mySiema.next(), 4000)
function updateCurrentSlideState() {
slideToggles.forEach((slideToggle, i) => {
if (mySiema.currentSlide === i) {
slideToggle.classList.add("is-active");
} else {
slideToggle.classList.remove("is-active");
}
});
}
function goToSlide(slideNumber) {
mySiema.goTo(slideNumber);
}
function nextByKeyDown(event) {
if (event.key === "ArrowRight") {
mySiema.next(1);
}
if (event.key === "ArrowLeft") {
mySiema.prev(1);
}
}
prev.addEventListener("click", () => mySiema.prev(1));
next.addEventListener("click", () => mySiema.next(1));
slideOneToggle.addEventListener("click", () => goToSlide(0));
slideTwoToggle.addEventListener("click", () => goToSlide(1));
slideThreeToggle.addEventListener("click", () => goToSlide(2));
slideFourToggle.addEventListener("click", () => goToSlide(3));
slideFiveToggle.addEventListener("click", () => goToSlide(4));
slideSixToggle.addEventListener("click", () => goToSlide(5));
slideSixBToggle.addEventListener("click", () => goToSlide(5));
slideSixCToggle.addEventListener("click", () => goToSlide(5));
document.addEventListener("keydown", nextByKeyDown);
</script>
</body>
</html>
I’d be very grateful if someone could help me !
Thanks a lot in advance