<div class="lightbox-multiple">
<div class="box-padding">
<br> <a class="btn
modal-toggle
" href="#" id="" data-modal="modalOne">
Lightbox New 'modalOne'
</a>
<br><br> <a class="link
modal-toggle
" href="#" data-modal="modalTwo">
<span>Lightbox New 'modalTwo'</span>
</a>
<br><br> <a class="btn
modal-toggle
" href="#" id="" data-modal="modalTwo">
Lightbox New 'modalTwo'
</a>
<br><br> <a class="link
modal-toggle
" href="#" data-modal="modalOne">
<span>Lightbox New 'modalOne'</span>
</a>
<br><br>
<p>Lightbox 'modalOne' linked inside a <a href='#' class='modal-toggle' data-modal='modalOne'>JSON string</a></p>
</div>
<div id="modalOne-lightbox-new" class="lightbox-new modalOne-lightbox-new-container">
<div id="modalOne-lightbox-new" class="modal">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 modal-box">
</div>
<div class="modal-header">
<h2 class="
title-l
">
Modal One Title
</h2>
<div class="
bodycopy-m
">
<p>Modal One Description</p>
</div>
</div>
<div class="modal-container">
<!-- AQUÍ COMIENZA EL CONTENIDO -->
<div class="lightbox-content-generic">
<div class="modal-body">
<section class="splitter splitter_bg-color_white ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
Contenido splitter
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- AQUÍ TERMINA EL CONTENIDO -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modalTwo-lightbox-new" class="lightbox-new modalTwo-lightbox-new-container">
<div id="modalTwo-lightbox-new" class="modal">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 modal-box">
</div>
<div class="modal-header">
<h2 class="
title-l
">
Modal Two Title
</h2>
<div class="
bodycopy-m
">
<p>Modal Two Description</p>
</div>
</div>
<div class="modal-container">
<!-- AQUÍ COMIENZA EL CONTENIDO -->
<div class="lightbox-content-generic">
<div class="modal-body">
<section class="splitter splitter_bg-color_white ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
Contenido splitter
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- AQUÍ TERMINA EL CONTENIDO -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lightbox-multiple">
<div class="box-padding">
<br>{{ render '@btn' modalTrigger1 }}
<br><br>{{ render '@link' modalTrigger2 }}
<br><br>{{ render '@btn' modalTrigger2 }}
<br><br>{{ render '@link' modalTrigger1 }}
<br><br>{{{ modalTrigger3 }}}
</div>
{{ render '@lightbox-new' lightbox1 }}
{{ render '@lightbox-new' lightbox2 }}
</div>
{
"modalTrigger1": {
"href": "#",
"text": "Lightbox New 'modalOne'",
"isModal": true,
"data-modal": "modalOne"
},
"modalTrigger2": {
"href": "#",
"text": "Lightbox New 'modalTwo'",
"isModal": true,
"data-modal": "modalTwo"
},
"modalTrigger3": "<p>Lightbox 'modalOne' linked inside a <a href='#' class='modal-toggle' data-modal='modalOne'>JSON string</a></p>",
"lightbox1": {
"hasID": true,
"idComponent": "modalOne",
"modalContent1": true,
"modalID": "modalOne-lightbox-new",
"title": {
"text": "Modal One Title"
},
"description": {
"text": "<p>Modal One Description</p>"
},
"content": {
"text": "<p>CONTENT 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem deleniti eaque minus nam, nesciunt officia possimus tempore vel velit. Amet excepturi odit pariatur quasi quisquam saepe sequi similique voluptatibus.</p>"
}
},
"lightbox2": {
"hasID": true,
"idComponent": "modalTwo",
"modalContent2": true,
"modalID": "modalTwo-lightbox-new",
"title": {
"text": "Modal Two Title"
},
"description": {
"text": "<p>Modal Two Description</p>"
},
"content": {
"text": ""
},
"img-url": "/dist/images/slider-desktop.jpg"
},
"src": "/dist/images/header-highlight-bg.jpg"
}
.lightbox-multiple {
}
No notes defined.