Two Ways to Delegate Data for Modal Slider Data Attributes and Array Implementation
The slider functionality has been added to the module to display related modals one by one without closing the active window. The slider accepts CSS selectors and a two-dimensional array as its value. With selectors, the application retrieves matching elements and displays them as a list of slides in the order that corresponds to their position in the DOM tree. In this option, the data required to load the modal is placed in the data attributes of individual elements. The other way to start the modal list is to properly fill in the slider property, placing a two-dimensional array in it. Additionally, each array index should store the information needed to start the application. Further in the article, examples of using the application with the slider function enabled will be presented:
Data attributes
The first way to start the slider is to pass the parameters through the data attributes and create the appropriate instance. The method of passing data using attributes works when we dynamically add elements to the page. Creating HTML code with attributes is done as follows:
<div class="modal-demo-content">
<button class="modal-slider-open modal-demo-button modal-slider" data-url="https://compsoul.dev/" data-element=".listing-article .listing-item:nth-child(2) .listing-content">First slide</button>
<button class="modal-slider-open modal-demo-button modal-slider" data-url="https://compsoul.dev/" data-element=".listing-article .listing-item:nth-child(3) .listing-content">Second slide</button>
<button class="modal-slider-open modal-demo-button modal-slider" data-url="https://compsoul.dev/" data-element=".listing-article .listing-item:nth-child(4) .listing-content">Third slide</button>
<button class="modal-slider-open modal-demo-button modal-slider" data-url="https://compsoul.dev/" data-element=".listing-article .listing-item:nth-child(5) .listing-content">Fourth slide</button>
<button class="modal-slider-open modal-demo-button modal-slider" data-url="https://compsoul.dev/" data-element=".listing-article .listing-item:nth-child(6) .listing-content">Fifth slide</button>
</div>
.compsoul-modal-container {
background: #000000BF;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
transition: opacity 0.4s;
will-change: opacity;
z-index: 6;
}
.compsoul-modal-container.modal-active {
opacity: 1;
pointer-events: auto;
}
.compsoul-modal-container.modal-close {
pointer-events: auto;
}
.modal-unset, .modal-unset:before, .modal-unset:after, .compsoul-modal-container.modal-unset, .compsoul-modal-main.modal-unset {
animation: unset !important;
transition: none !important;
}
.compsoul-modal-container:before {
animation: compsoul-modal-loading 1s infinite;
border-bottom: 0.5em solid #ffffff00;
border-left: 0.5em solid #ffffff;
border-right: 0.5em solid #ffffff;
border-top: 0.5em solid #ffffff00;
border-radius: 100%;
box-sizing: content-box;
content: "";
font-size: 4px;
height: 6em;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition: opacity 0.4s;
will-change: opacity;
width: 6em;
}
.compsoul-modal-container.modal-ready:before, .compsoul-modal-container.modal-error:before {
animation-play-state: paused;
opacity: 0;
}
@keyframes compsoul-modal-loading {
from {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
to {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
}
.compsoul-modal-container:after {
color: #ffffff;
content: "\26A0";
font-size: 42px;
font-weight: 200;
left: 50%;
margin: -6px 0 0 0;
opacity: 0;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition: opacity 0.4s;
will-change: opacity;
}
.compsoul-modal-container.modal-error:after {
opacity: 1;
}
.compsoul-modal-main {
left: 50%;
max-height: calc(2 * 40vh);
opacity: 0;
position: absolute;
top: 50%;
transform: translate3d(-50%, calc(-50% - 100px), 0);
transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
width: 800px;
z-index: 1;
will-change: transform, opacity;
}
.modal-ready.modal-active .compsoul-modal-main {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
}
.modal-change .compsoul-modal-main {
transition: transform 0.4s, opacity 0.4s;
}
.compsoul-modal-main:before {
background: #fff;
border-radius: 8px;
bottom: -32px;
box-shadow: 0 5px 26px 0 rgba(0, 0, 0, 0.22), 0 20px 28px 0 rgba(0, 0, 0, 0.30);
content: "";
left: -32px;
position: absolute;
right: -32px;
top: -32px;
z-index: -1;
}
.compsoul-modal-content {
background: #fff;
line-height: 1.2;
overflow-y: auto;
max-height: calc(2 * 40vh);
padding: 0 32px 0 0;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.compsoul-modal-content:after {
content: "";
display: table;
clear: both;
}
.compsoul-modal-close {
right: 8em;
position: absolute;
top: 8em;
z-index: 2;
}
.compsoul-modal-next {
right: 8em;
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
}
.compsoul-modal-prev {
left: 8em;
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
}
.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
background: #000000;
border: none;
cursor: default;
font-size: 2.6px;
height: 16em;
opacity: 0;
outline: 1px solid #e7a14f00;
padding: 0;
text-align: center;
transition: opacity 0.4s, outline 0.4s;
width: 16em;
}
.compsoul-modal-close:focus, .compsoul-modal-close:focus-within, .compsoul-modal-next:focus, .compsoul-modal-next:focus-within, .compsoul-modal-prev:focus, .compsoul-modal-prev:focus-within {
outline: 1px solid #e7a14fff;
}
.compsoul-modal-close, .compsoul-modal-next.modal-active, .compsoul-modal-prev.modal-active {
cursor: pointer;
opacity: 1;
}
.compsoul-modal-close:before, .compsoul-modal-close:after, .compsoul-modal-next:before, .compsoul-modal-prev:before {
border-top: 1em solid #ffffff;
border-right: 1em solid #ffffff;
box-sizing: content-box;
content: "";
cursor: pointer;
display: inline-block;
height: 4em;
padding: 0 0 1em 1em;
transform: rotate(45deg) translate3d(-25%, 25%, 0);
transition: opacity 0.4s, border 0.4s;
width: 4em;
}
.compsoul-modal-close:before, .compsoul-modal-close:after {
height: 3em;
width: 3em;
}
.compsoul-modal-close:hover:before, .compsoul-modal-close:hover:after, .compsoul-modal-next:hover:before, .compsoul-modal-prev:hover:before {
border-top: 1em solid #e7a14f;
border-right: 1em solid #e7a14f;
}
.compsoul-modal-close:after, .compsoul-modal-prev:before {
transform: rotate(-135deg) translate3d(-25%, 25%, 0);
}
.compsoul-modal-close:before {
transform: rotate(45deg) translate3d(-7%, 7%, 0);
}
.compsoul-modal-close:after {
transform: rotate(-135deg) translate3d(-7%, 7%, 0);
}
.compsoul-modal-timer {
height: 3px;
left: 0;
position: absolute;
top: 0;
z-index: 5;
width: 100%;
}
.compsoul-modal-timer:before {
animation: compsoul-slide-timeline 8s linear forwards;
animation-play-state: paused;
background: #e7a14f;
content: "";
display: block;
height: 100%;
transform: translate3d(-100%, 0, 0);
width: 100%;
}
.modal-ready .compsoul-modal-timer:before {
animation-play-state: running;
}
.compsoul-modal-container:hover .compsoul-modal-timer:before {
animation-play-state: paused;
}
@keyframes compsoul-slide-timeline {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@media only screen and (max-width: 1060px) {
.compsoul-modal-main {
width: calc(100% - 94px);
}
.compsoul-modal-main:before {
bottom: -12px;
left: -12px;
right: -12px;
top: -12px;
}
.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
font-size: 2px;
}
.compsoul-modal-close {
right: 0;
top: 0;
}
.compsoul-modal-next {
right: 0;
}
.compsoul-modal-prev {
left: 0;
}
}
.modal-box {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: block;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
height: 0;
margin: 32px auto;
overflow: hidden;
transition: height 0.4s;
width: 264px;
}
.modal-box.modal-active {
height: 180px;
}
.modal-box-content {
padding: 24px 32px;
}
.modal-box-open {
margin: 21px auto;
}
<script src="https://compsoul.dev/uploads/js/compsoul.js"></script><script src="https://compsoul.dev/uploads/js/modal.js"></script><script>
new Modal().options({
slider: ".modal-slider",
open: ".modal-slider-open"
}).init();
</script>
Array
Another way of delegating data is by passing a two-dimensional array as a list of individual slides. In this method, we don't need any changes in the HTML code and for the application to work correctly, it's enough to place the two-dimensional array as the value of the slider option. An example of using this method is shown below:
<div class="modal-demo-content">
<button class="modal-slider-array modal-demo-button">Open modal</button>
</div>
.compsoul-modal-container {
background: #000000BF;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
transition: opacity 0.4s;
will-change: opacity;
z-index: 6;
}
.compsoul-modal-container.modal-active {
opacity: 1;
pointer-events: auto;
}
.compsoul-modal-container.modal-close {
pointer-events: auto;
}
.modal-unset, .modal-unset:before, .modal-unset:after, .compsoul-modal-container.modal-unset, .compsoul-modal-main.modal-unset {
animation: unset !important;
transition: none !important;
}
.compsoul-modal-container:before {
animation: compsoul-modal-loading 1s infinite;
border-bottom: 0.5em solid #ffffff00;
border-left: 0.5em solid #ffffff;
border-right: 0.5em solid #ffffff;
border-top: 0.5em solid #ffffff00;
border-radius: 100%;
box-sizing: content-box;
content: "";
font-size: 4px;
height: 6em;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition: opacity 0.4s;
will-change: opacity;
width: 6em;
}
.compsoul-modal-container.modal-ready:before, .compsoul-modal-container.modal-error:before {
animation-play-state: paused;
opacity: 0;
}
@keyframes compsoul-modal-loading {
from {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
to {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
}
.compsoul-modal-container:after {
color: #ffffff;
content: "\26A0";
font-size: 42px;
font-weight: 200;
left: 50%;
margin: -6px 0 0 0;
opacity: 0;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition: opacity 0.4s;
will-change: opacity;
}
.compsoul-modal-container.modal-error:after {
opacity: 1;
}
.compsoul-modal-main {
left: 50%;
max-height: calc(2 * 40vh);
opacity: 0;
position: absolute;
top: 50%;
transform: translate3d(-50%, calc(-50% - 100px), 0);
transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
width: 800px;
z-index: 1;
will-change: transform, opacity;
}
.modal-ready.modal-active .compsoul-modal-main {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
}
.modal-change .compsoul-modal-main {
transition: transform 0.4s, opacity 0.4s;
}
.compsoul-modal-main:before {
background: #fff;
border-radius: 8px;
bottom: -32px;
box-shadow: 0 5px 26px 0 rgba(0, 0, 0, 0.22), 0 20px 28px 0 rgba(0, 0, 0, 0.30);
content: "";
left: -32px;
position: absolute;
right: -32px;
top: -32px;
z-index: -1;
}
.compsoul-modal-content {
background: #fff;
line-height: 1.2;
overflow-y: auto;
max-height: calc(2 * 40vh);
padding: 0 32px 0 0;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.compsoul-modal-content:after {
content: "";
display: table;
clear: both;
}
.compsoul-modal-close {
right: 8em;
position: absolute;
top: 8em;
z-index: 2;
}
.compsoul-modal-next {
right: 8em;
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
}
.compsoul-modal-prev {
left: 8em;
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
}
.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
background: #000000;
border: none;
cursor: default;
font-size: 2.6px;
height: 16em;
opacity: 0;
outline: 1px solid #e7a14f00;
padding: 0;
text-align: center;
transition: opacity 0.4s, outline 0.4s;
width: 16em;
}
.compsoul-modal-close:focus, .compsoul-modal-close:focus-within, .compsoul-modal-next:focus, .compsoul-modal-next:focus-within, .compsoul-modal-prev:focus, .compsoul-modal-prev:focus-within {
outline: 1px solid #e7a14fff;
}
.compsoul-modal-close, .compsoul-modal-next.modal-active, .compsoul-modal-prev.modal-active {
cursor: pointer;
opacity: 1;
}
.compsoul-modal-close:before, .compsoul-modal-close:after, .compsoul-modal-next:before, .compsoul-modal-prev:before {
border-top: 1em solid #ffffff;
border-right: 1em solid #ffffff;
box-sizing: content-box;
content: "";
cursor: pointer;
display: inline-block;
height: 4em;
padding: 0 0 1em 1em;
transform: rotate(45deg) translate3d(-25%, 25%, 0);
transition: opacity 0.4s, border 0.4s;
width: 4em;
}
.compsoul-modal-close:before, .compsoul-modal-close:after {
height: 3em;
width: 3em;
}
.compsoul-modal-close:hover:before, .compsoul-modal-close:hover:after, .compsoul-modal-next:hover:before, .compsoul-modal-prev:hover:before {
border-top: 1em solid #e7a14f;
border-right: 1em solid #e7a14f;
}
.compsoul-modal-close:after, .compsoul-modal-prev:before {
transform: rotate(-135deg) translate3d(-25%, 25%, 0);
}
.compsoul-modal-close:before {
transform: rotate(45deg) translate3d(-7%, 7%, 0);
}
.compsoul-modal-close:after {
transform: rotate(-135deg) translate3d(-7%, 7%, 0);
}
.compsoul-modal-timer {
height: 3px;
left: 0;
position: absolute;
top: 0;
z-index: 5;
width: 100%;
}
.compsoul-modal-timer:before {
animation: compsoul-slide-timeline 8s linear forwards;
animation-play-state: paused;
background: #e7a14f;
content: "";
display: block;
height: 100%;
transform: translate3d(-100%, 0, 0);
width: 100%;
}
.modal-ready .compsoul-modal-timer:before {
animation-play-state: running;
}
.compsoul-modal-container:hover .compsoul-modal-timer:before {
animation-play-state: paused;
}
@keyframes compsoul-slide-timeline {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@media only screen and (max-width: 1060px) {
.compsoul-modal-main {
width: calc(100% - 94px);
}
.compsoul-modal-main:before {
bottom: -12px;
left: -12px;
right: -12px;
top: -12px;
}
.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
font-size: 2px;
}
.compsoul-modal-close {
right: 0;
top: 0;
}
.compsoul-modal-next {
right: 0;
}
.compsoul-modal-prev {
left: 0;
}
}
.modal-box {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: block;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
height: 0;
margin: 32px auto;
overflow: hidden;
transition: height 0.4s;
width: 264px;
}
.modal-box.modal-active {
height: 180px;
}
.modal-box-content {
padding: 24px 32px;
}
.modal-box-open {
margin: 21px auto;
}
<script src="https://compsoul.dev/uploads/js/compsoul.js"></script><script src="https://compsoul.dev/uploads/js/modal.js"></script><script>
new Modal("body").options({
open: ".modal-slider-array",
slider: [
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(2) h2"],
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(3) h2"],
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(4) h2"],
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(5) h2"],
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(6) h2"]
]
}).init();
</script>
After clicking on the button, we can see that the application loads a list of slides located in the array. But what if we want to send someone a link to an open modal? The hash function comes to our aid. Please refer to the next part of the article:
Hash
The modal function has been described in another work of the same name, so let's focus on the version intended for the slider options. In order to run the application, after entering the appropriate variable in the address bar, the modal requires the completion of all slider option settings. To illustrate the application's operation, let's create a fully completed instance using the array method:
<script src="https://compsoul.dev/uploads/js/compsoul.js"></script><script src="https://compsoul.dev/uploads/js/modal.js"></script><script>
new Modal("body").options({
slider: [
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(2) h2", "h21"],
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(3) h2", "h22"],
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(4) h2", "h23"],
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(5) h2", "h24"],
["https://compsoul.dev/", ".listing-article .listing-item:nth-child(6) h2", "h25"]
]
}).init();
</script>
To activate a specific slide, a variable from the array must be added to the address bar. For example: to activate the modal with the "h24" variable, we must add the appropriate hash to the address bar: https://compsoul.dev/modal-popup-window-html-css-javascript/slider-carousel-popup/#h24
Once the modal is launched, slide number four is activated first. The modal will not appear if another modal is active, such as cookie acceptance. The slider functionality has a wide range of possibilities, from dynamically loading a list of products to a remote photo gallery. An example of using the module is the list of products on this page.
Thank You for Reading
We hope you enjoyed this post! If you did, please consider following us on Facebook and leaving a like and a comment. If you have any questions or need assistance, feel free to use our contact form or email us at daniel@compsoul.dev. For urgent inquiries, you can reach us by phone at +48 732 846 416.