<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-header">
<h2 class="
title-l
">
Detalle de requisitos
</h2>
<div class="
bodycopy-m
">
<p>Tienes un perfil chulo chulo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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">
<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">
<div class="description-list text-list">
<dl>
<div class="wrap">
<dt class="ok" id=""><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
<span class="bodycopy-m">Titulares:</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</dt>
<dd class="" id=""><span class="bodycopy-m">El límite de titulares para acceder al aval es hasta dos titulares.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</div>
<div class="wrap">
<dt class="ko" id=""><svg class="icon icon-16_feedback-error ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-error"></use>
</svg>
<span class="bodycopy-m">Edad y menores a cargo:</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</dt>
<dd class="" id=""><span class="bodycopy-m">Debes tener 35 años o menos, ser mayor de edad o tener hijos a tu cargo, en cuyo caso no importa la edad.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</div>
<div class="wrap">
<dt class="ok" id=""><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
<span class="bodycopy-m">Límite de ingresos:</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</dt>
<dd class="" id=""><span class="bodycopy-m">El patrimonio no debe exceder los 100.000 €.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</div>
<div class="wrap">
<dt class="ok" id=""><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
<span class="bodycopy-m">Primera vivienda:</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</dt>
<dd class="" id=""><span class="bodycopy-m">La vivienda que vas a a adquirir debe ser tu primera vivienda, excepto en casos de herencias parciales, divorcio o inaccesibilidad de la vivienda actual debido a discapacidad. No eres propietario de otra vivienda. No se podrá hacer uso de la vivienda para el ejercicio de una actividad económica).</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</div>
<div class="wrap">
<dt class="ok" id=""><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
<span class="bodycopy-m">Residencia legal:</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</dt>
<dd class="" id=""><span class="bodycopy-m">Debes cumplir la antigüedad de 2 años en residencia española.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</div>
</dl>
</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>"
},
"title": {
"text": "Detalle de requisitos"
},
"description": {
"text": "<p>Tienes un perfil chulo chulo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
"type": "-m"
},
"isRequisitosICO": 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>