<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 -->
<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="lightbox-content-description-list">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title calculatorLightbox2">
<h2><span class="title-l
">Desglose de gastos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></h2>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="description-list">
<h3>
<div class="text-label-m">Gastos</div>
</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
<dl>
<dt class="" id=""><span class="bodycopy-m">Notaría</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">1.151 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy-m">Registro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">574 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy-m">Gestoría</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">391 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy-m">Tasación</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">- €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="total" id=""><span class="bodycopy-l">Total</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="total" id=""><span class="bodycopy-l">2.115 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</dl>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="description-list">
<h3>
<div class="text-label-m">Impuestos</div>
</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
<dl>
<dt class="" id=""><span class="bodycopy-m">Transmisiones</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">20.700 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy-m">Otro impuesto</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy-m">220 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="total" id=""><span class="bodycopy-l">Total</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="total" id=""><span class="bodycopy-l">20.900 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</dl>
</div>
</div>
</div>
<div class="box-result">
<h3>
<div class="
text-label-s
"><span>Total de gastos e impuestos</span></div>
</h3>
<div class="text">
<h2 class="
title-l
">
<p>23.015 €</p>
</h2>
</div>
</div> <span class="bodycopy-xs">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus vitae leo vel consequat. Aenean vitae libero accumsan, ultricies sem vitae, egestas nunc. In non neque nec odio venenatis eleifend ac ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec hendrerit ligula, sed efficitur tortor. Mauris bibendum quam ut nisl euismod imperdiet. Sed vehicula, quam id rutrum placerat, diam dolor tincidunt sem, non placerat risus ex nec nunc. Aliquam id arcu vel quam efficitur tempus. Integer nec interdum ligula. Ut interdum tellus eu tellus dapibus, quis aliquet risus sollicitudin.</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 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>"
},
"isDesgloseGatosCalculadoraLightbox": 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>