<div id="modalOne-lightbox-new" class="lightbox-new modalOne-lightbox-new-container">
<div class="box-padding">
<br><br> <a class="btn
modal-toggle
" href="#" id="" data-modal="modalOne">
Lightbox New button
</a>
<br><br>
<div class="
bodycopy-s
">
<br>* For multiple lightbox samples go to: <b> > Examples > Lightbox Multiple</b></b><br>See how customize code in tab 'Notes' below this window.
</div>
</div>
<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 class="modal-top">
<span class="modal-close">
<svg class="icon icon-24_close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#24_close"></use>
</svg>
</span>
</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">
<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_padding_bottom_large ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="form-success">
<div class="success">
<div class="success__icon">
<svg class="icon icon-complex_enviar icon-56 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_enviar"></use>
</svg>
</div>
<div class="success__title">
<h2 class="
title-l
">
¡No pongas tu teléfono en modo avión!
</h2>
</div>
<div class="success__description">
<div class="
bodycopy-m
">
<p>Contactaremos contigo en el horario seleccionado: <span class='resaltado'>15:00 - 17:00*</span></p>
</div>
</div>
<div class="success__helpertext">
<div class="
bodycopy-m
">
*Horario peninsular en España
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- AQUÍ TERMINA EL CONTENIDO -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}-lightbox-new" {{/if}} class="lightbox-new {{modalID}}-container">
{{#if showDemoTrigger }}
{{! Not to include in templates }}
<div class="box-padding">
<br><br>{{ render '@btn' modalTrigger1 }}
<br><br>{{> @bodycopy-s demoInfo }}
</div>
{{/if}}
<div id="{{modalID}}" class="modal{{#if isEmpty}} empty{{/if}}">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="{{#if isSmallBox}}col-xs-12 col-ms-6 col-ms-mr-ml col-sm-6 col-lg-6{{else if isMediumBox}}col-xs-12 col-ms-8 col-ms-mr-ml col-sm-8 col-lg-8{{else}}col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12{{/if}} modal-box">
{{#if close}}
<div class="modal-top">
<span class="modal-close">
{{ render '@icon--24-close' }}
</span>
{{/if}}
</div>
{{#if title}}
<div class="modal-header">
{{> @title-l title }}
{{> @bodycopy-m description }}
</div>
{{/if}}
<div class="modal-container{{#if footer}} withFooter{{/if}}{{#if isEmptyState}} empty-state{{/if}}">
<!-- AQUÍ COMIENZA EL CONTENIDO -->
{{#if isLegals}}
{{ render '@lightbox-content-legals' }}
{{else if isMedia}}
{{> @media mediavideo }}
{{else if isResourcesForm}}
{{ render '@lightbox-content-resources-form' }}
{{else if isResultForm}}
{{ render '@lightbox-content-result-form' }}
{{else if isSuccess}}
{{ render '@lightbox-content-success' }}
{{else if isCalculadora1}}
Lightbox Calculadora1
{{else if isCalculadora2}}
Lightbox Calculadora2
{{else if isCalculadora3}}
Lightbox Calculadora3
{{else if isDocumentsUploadLightbox}}
{{ render '@lightbox-content-generic--documentsuploadlightbox' }}
{{else if isSolicitudLlamadaLightbox}}
{{ render '@lightbox-content-generic--solicitudllamadalightbox' }}
{{else if isSolicitudLlamadaSimpleLightbox}}
{{ render '@lightbox-content-generic--solicitudllamadasimplelightbox' }}
{{else if isSolicitudLlamadaSuccessLightbox}}
{{ render '@lightbox-content-generic--solicitudllamadasuccesslightbox' }}
{{else if isBankflipLightbox}}
{{ render '@lightbox-content-generic--bankfliplightbox' }}
{{else if isDeleteDocumentLightbox}}
{{ render '@lightbox-content-generic--deletedocumentlightbox' }}
{{else if isDesgloseGatosCalculadoraLightbox}}
{{ render '@lightbox-content-description-list' }}
{{else if isRequisitosICO}}
{{ render '@lightbox-content-generic--requisitos-ico' }}
{{else if isPreloader}}
{{ render '@lightbox-content-generic--preloader' }}
{{else}}
{{ render '@lightbox-content-generic--splitter' }}
{{/if}}
<!-- AQUÍ TERMINA EL CONTENIDO -->
</div>
{{#if footer}}
<div class="modal-footer{{#if footer-fixed}} fixed{{/if}}">
<ul>
{{#if link-izq}}
<li>{{> @link link-izq }}</li>
{{else if button-izq}}
<li>{{> @btn button-izq }}</li>
{{else if button-secondary-izq}}
<li>{{> @btn button-secondary-izq }}</li>
{{/if}}
{{#if link}}
<li>{{> @link link }}</li>
{{else if button}}
<li>{{> @btn button }}</li>
{{else if button-secondary}}
<li>{{> @btn button-secondary }}</li>
{{/if}}
</ul>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
{
"hasID": true,
"idComponent": "modalOne",
"showDemoTrigger": true,
"demoInfo": {
"text": "<br>* For multiple lightbox samples go to: <b> > Examples > Lightbox Multiple</b></b><br>See how customize code in tab 'Notes' below this window."
},
"modalTrigger1": {
"href": "#",
"text": "Lightbox New button",
"isModal": true,
"data-modal": "modalOne"
},
"modalTrigger2": {
"href": "#",
"text": "Lightbox Link",
"isModal": true,
"data-modal": "modalOne"
},
"modalID": "modalOne-lightbox-new",
"modalContent1": true,
"close": true,
"img-url": "/dist/images/slider-desktop.jpg",
"content": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores quidem voluptas! Debitis dolorum ea id iusto, nisi nobis nostrum nulla officia officiis perspiciatis quaerat quis, reprehenderit, tenetur. Aut, ducimus!</p>"
},
"isSolicitudLlamadaSuccessLightbox": true
}
.lightbox-new {
.modal {
visibility: hidden;
opacity: 0;
position: fixed;
z-index: 8887;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: auto;
background-color: rgba(0, 0, 0, .3);
transition: all .15s ease-in-out;
&.fade-in {
visibility: visible;
opacity: 1;
}
&.fade-out {
opacity: 0;
visibility: hidden;
}
&-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
/*max-height: calc(100vh - 60px);*/
@media (--viewport-ms-max) {
.container {
padding-left: 15px;
padding-right: 15px;
}
}
@media (--viewport-xs-max) {
.container {
padding-left: 10px;
padding-right: 10px;
}
}
/*@media (--viewport-xs-max) {
max-height: 100vh;
width: 100vw;
&>.container>.row {
margin-right: -19px;
margin-left: -20px;
}
}*/
.modal-box {
position: relative;
background-color: #fff;
overflow: auto;
max-height: calc(100vh - 116px);
min-height: 624px;
height: auto;
/*padding-right: calc(20px - var(--half-gutter-width));
padding-left: calc(20px - var(--half-gutter-width));*/
padding: 0 40px 0;
@media (--viewport-md-max) {
max-height: calc(100vh - 119px);
}
@media (--viewport-sm-max) {
max-height: calc(100vh - 30px);
}
@media (--viewport-ms-max) {
height: 100vh;
max-height: 100vh;
padding: 0 0 0;
}
.modal-header {
padding: 40px 72px 0;
@media (--viewport-md-max) {
padding: 40px 64px 0;
}
@media (--viewport-sm-max) {
padding: 40px 44px 0;
}
@media (--viewport-ms-max) {
padding: 40px 30px 0;
}
@media (--viewport-xs-max) {
padding: 40px 20px 0;
}
.title-l + .bodycopy-m {
margin-top: 32px;
}
}
.modal-footer {
padding: 0 72px;
@media (--viewport-md-max) {
padding: 0 64px;
}
@media (--viewport-sm-max) {
padding: 0 44px;
}
@media (--viewport-ms-max) {
padding: 0 30px;
}
@media (--viewport-xs-max) {
padding: 0 20px;
}
ul {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 40px;
margin-bottom: 64px;
@media (--viewport-ms-max) {
margin-bottom: 74px;
}
@media (--viewport-xs-max) {
justify-content: center;
flex-direction: column;
margin-bottom: 40px;
li {
margin-bottom: 40px;
&:last-of-type{
margin-bottom: 0;
}
}
li + li {
margin-bottom: 0;
}
}
}
&.fixed {
position: sticky;
bottom: 0;
width: 100%;
background-color: var(--color-background);
z-index: 9;
}
}
.modal-container {
min-height: auto;
padding: 40px 72px 64px;
/*max-height: calc(100vh - 140px);*/
@media (--viewport-md-max) {
padding: 40px 64px 64px;
}
@media (--viewport-sm-max) {
padding: 40px 44px 64px;
}
@media (--viewport-ms-max) {
padding: 40px 30px 64px;
}
@media (--viewport-xs-max) {
padding: 40px 20px 64px;
}
&.withFooter {
padding-bottom: 0;
}
&.empty-state{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
@media (--viewport-sm-max) {
padding-top:40px;
padding-bottom:40px;
}
}
.modal-body {
/*.row{background-color: var(--color-white);} Lo comento porque genera error al meter dentro del splitter un componente producto, por ejemplo (CA) */
&.legals {
margin-bottom: 20px;
p a {
text-decoration: underline;
color: var(--color-secondary);
}
}
&.legals {
margin-bottom: 20px;
p a {
text-decoration: underline;
color: var(--color-secondary);
}
}
.modal-success {
margin-bottom: 20px;
}
}
.modal-head {
margin-bottom: var(--gutter-width);
}
.splitter {
.container {
margin: 0;
padding: 0;
.splitter__wrapper {
margin: 0;
/*padding: 0; lo comento para que se pueda poner espacio entre splitters (CA)*/
background: none;
@media (--viewport-ms-max) {
.preloader.as-component {
height: calc(100vh - 152px);
}
}
}
}
}
}
}
}
&-top {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
right: 0;
top: 0;
background-color: var(--color-background);
padding: 0;
position: sticky;
z-index: 9;
height: 48px;
}
&-close {
position: relative;
line-height: 0;
margin-top: 24px;
@media (--viewport-ms-max) {
margin-right: 30px;
}
@media (--viewport-xs-max) {
margin-right: 20px;
}
&:hover,
&:focus {
text-decoration: none;
cursor: pointer;
}
}
&-title {
color: white;
}
&__title {
&.small {
margin-bottom: 20px;
.title-m {
color: var(--color-secondary);
}
}
}
&.empty {
.modal-box {
background: none;
padding: 0;
.modal-top {
height: auto;
background: none;
justify-content: flex-end;
.modal-close {
position: relative;
top: 0;
height: 40px;
right: 0;
float: right;
.icon {
background-color: var(--color-secondary);
width: 30px;
height: 30px;
fill: var(--color-white);
border-radius: 50%;
}
}
}
.modal-container {
padding: 0;
.container {
padding: 0;
.col-xs-12,
.col-ms-12,
.col-sm-12,
.col-lg-12 {
padding: 0;
}
h2,
.bodycopy-m {
display: none;
}
}
.splitter__wrapper {
.row {
margin: 0;
.media {
.row {
margin: 0;
}
}
}
}
}
}
}
}
}
/*.modal-toggle {
cursor:pointer
}*/
Variantes: Default, Medium box, Small box, Modal empty, Modal media video, Modal legals, Modal resources form, Modal result form, Modal success. Permite configurar el id de la modal y dentro del div.modal-container se cargan los componentes para cada uso específico.
<a href='#' class='modal-toggle' data-modal='modalOne'>Link to 'modalOne'</a><div class="lightbox-new modalOne-container">
<div id="modalOne" class="modal">...</div>
</div>