<div class="o-dimLayer position-fixed w-100 h-100"></div>
<div class="o-modal position-fixed w-100 h-100 ">
<div class="o-modal__stage position-absolute w-100 h-100">
<div class="o-modal__holder w-100">
<div class="o-modal__box position-relative overflow-visible border-radius d-flex flex-column">
<div class="o-modal__header w-100 d-flex justify-content-end align-items-center position-relative">
<div class="o-modal__actions">
<div class="a-circle -button -hover -border -pointer cursor-default">
<i class="icon-close"></i>
</div>
</div>
</div>
<div class="o-modal__body">
<h1>Wijzigen definitieve configuratie</h1>
<p class="text-center mb-4">Je hebt eerder al een definitieve keuze voor de configuratie doorgegeven. Weet je zeker dat je deze keuze wilt wijzigen?</p>
<div class="d-flex flex-column flex-xs-row">
<button type="button" class="btn btn-block btn-outline-dark -iconRight">
Annuleren
</button>
<button type="button" class="btn btn-block btn-primary -iconRight">
Wijziging doorvoeren
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% render '@dim-layer' %}
<div class="o-modal{% if image %} -full -image{% endif %} position-fixed w-100 h-100 {% if size == 'small' %} -small{% elif size == 'full' %} -full{% endif %} {% if configurator %}-contentHeader{% endif %}">
<div class="o-modal__stage position-absolute w-100 h-100">
<div class="o-modal__holder w-100">
{% if confetti_large %}{% render '@'+confetti %}{% endif %}
<div class="o-modal__box position-relative overflow-visible border-radius d-flex flex-column">
{% if confetti and not confetti_large %}{% render '@'+confetti %}{% endif %}
{% if size == 'small' %}
<div class="o-modal__header w-100 d-flex justify-content-between align-items-center position-relative">
{% if title %}<h4 class="mb-0">{{title}}</h4>{% endif %}
<div class="o-modal__actions p-0">
{% render '@circle', {icon:"close"}, true %}
</div>
</div>
<div class="o-modal__body {% if padding == 0 %}p-0{% endif %}">
{% if handle %}{% render '@'+handle %}{% else %}<span class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>{% endif %}
</div>
{% elif size == 'full' and image == false %}
<div class="o-modal__header w-100 d-flex justify-content-end align-items-center position-relative">
<div class="flex-grow-1">
<h1 class="mb-0 d-flex align-items-center">
<span class="o-modal__title">{{title}}</span>
{% if badge == true %}
<span class="ml-2 mb-1 ml-lg-3 d-flex align-items-center">{% render '@badge--offerte' %}</span>
{% endif %}
</h1>
{% if subtitle %}
<small class="text-muted">{{subtitle}}</small>
{% endif %}
</div>
<div class="d-none d-lg-flex align-items-center">
<div class="mx-4">
<div class="font-weight-bold">Naam conceptontwerp</div>
<small class="text-muted">De Klamp Schets 1</small>
</div>
<div class="mx-4">
<div class="font-weight-bold">Laatst gewijzigd</div>
<small class="text-muted">12-03-2021, 13:25</small>
</div>
</div>
<div class="o-modal__actions d-flex ml-4 p-0">
<div class="d-none d-lg-block mr-3">
{% render '@button', {text:"Opslaan"}, true %}
</div>
{% render '@circle', {icon:"close"}, true %}
</div>
</div>
<div class="o-modal__body position-relative flex-grow-1 {% if padding == 0 %}p-0{% endif %}">
{% if loading %}
<div class="absolute d-flex flex-column align-items-center justify-content-center">
{% render '@loader--rotate' %}
<div class="text-muted mt-1">Configurator laden...</div>
</div>
{% else %}
<iframe src="http://fijn-frontend.azurewebsites.net/html/white-label/wonen/index.html" class="d-none d-md-flex"></iframe>
<div class="o-modal__switch d-flex d-md-none flex-column justify-content-center align-items-center h-100">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5577 21.6023H10.4425L9.88162 24.0865H5.64966V25.61H20.3505V24.0865H16.1186L15.5577 21.6023Z" fill="rgba(0,0,0,.3)"/>
<path d="M0 18.5553C0 19.3967 0.682043 20.0788 1.52344 20.0788H24.4766C25.318 20.0788 26 19.3967 26 18.5553V16.5251H0V18.5553Z" fill="rgba(0,0,0,.3)"/>
<path d="M24.4766 0.390015H1.52344C0.682043 0.390015 0 1.07206 0 1.91345V15.0018H26V1.91345C26 1.07211 25.318 0.390015 24.4766 0.390015Z" fill="rgba(0,0,0,.3)"/>
<path d="M15.8619 7.33348H11.9998C11.8157 7.33348 11.6664 7.18423 11.6664 7.00013C11.6664 6.81603 11.8157 6.66678 11.9998 6.66678H15.8619L15.0976 5.90244C14.9674 5.77226 14.9674 5.56119 15.0976 5.43101C15.2277 5.30083 15.4388 5.30083 15.569 5.43101L16.9024 6.76441C16.9102 6.77218 16.9175 6.78035 16.9245 6.78885C16.9276 6.7927 16.9304 6.79676 16.9333 6.80071C16.9369 6.80546 16.9406 6.8101 16.9439 6.81506C16.9471 6.81979 16.9498 6.82471 16.9527 6.82957C16.9554 6.83404 16.9582 6.83842 16.9607 6.84303C16.9633 6.84798 16.9656 6.85309 16.968 6.85815C16.9702 6.86295 16.9726 6.86767 16.9747 6.87259C16.9767 6.87751 16.9784 6.88254 16.9801 6.88754C16.982 6.89281 16.984 6.898 16.9857 6.90337C16.9872 6.90837 16.9883 6.91345 16.9896 6.91852C16.9909 6.924 16.9925 6.92942 16.9936 6.93502C16.9947 6.94088 16.9954 6.94678 16.9963 6.95267C16.997 6.95753 16.9979 6.96233 16.9984 6.96725C17.0005 6.98913 17.0005 7.01118 16.9984 7.03305C16.9979 7.03798 16.997 7.04276 16.9963 7.04763C16.9954 7.05352 16.9947 7.05945 16.9936 7.06529C16.9925 7.07088 16.9909 7.07629 16.9895 7.08177C16.9883 7.08684 16.9872 7.09192 16.9856 7.09692C16.984 7.10229 16.982 7.10749 16.9801 7.11275C16.9783 7.11775 16.9767 7.12278 16.9746 7.1277C16.9726 7.13262 16.9702 7.13732 16.9679 7.14212C16.9656 7.14718 16.9633 7.15229 16.9606 7.15726C16.9582 7.16186 16.9554 7.16622 16.9527 7.17069C16.9498 7.17556 16.9471 7.18048 16.9439 7.18523C16.9406 7.19017 16.9369 7.1948 16.9334 7.19955C16.9304 7.20352 16.9276 7.20758 16.9245 7.21144C16.9176 7.21988 16.9103 7.22799 16.9025 7.23569C16.9025 7.23575 16.9025 7.23581 16.9024 7.23586L15.569 8.56927C15.4388 8.69945 15.2277 8.69945 15.0976 8.56927C14.9674 8.43909 14.9674 8.22801 15.0976 8.09783L15.8619 7.33348Z" fill="white"/>
<path d="M9.07496 10.2114C9.07177 10.2075 9.06902 10.2034 9.06604 10.1994C9.0625 10.1947 9.05883 10.1901 9.05555 10.1852C9.05236 10.1804 9.04961 10.1755 9.04671 10.1706C9.04405 10.1661 9.04125 10.1618 9.0388 10.1572C9.03614 10.1522 9.03388 10.1471 9.03149 10.142C9.02922 10.1373 9.02685 10.1326 9.0248 10.1276C9.02277 10.1227 9.02111 10.1177 9.01933 10.1127C9.01744 10.1074 9.01542 10.1022 9.0138 10.0969C9.01228 10.0919 9.01117 10.0868 9.00991 10.0817C9.00852 10.0762 9.00699 10.0708 9.00588 10.0652C9.00472 10.0594 9.00403 10.0535 9.00317 10.0476C9.00248 10.0427 9.00155 10.0379 9.00106 10.033C8.99891 10.0111 8.99891 9.98908 9.00106 9.9672C9.00155 9.96228 9.00247 9.9575 9.00317 9.95262C9.00402 9.94673 9.0047 9.94081 9.00588 9.93496C9.00699 9.92937 9.00852 9.92396 9.00991 9.91848C9.01117 9.91342 9.01228 9.90834 9.0138 9.90334C9.01542 9.89796 9.01744 9.89276 9.01933 9.88751C9.02113 9.88251 9.02277 9.87748 9.0248 9.87255C9.02683 9.86765 9.02922 9.86294 9.03149 9.85816C9.03388 9.85309 9.03613 9.84796 9.0388 9.84299C9.04125 9.83841 9.04405 9.83405 9.04671 9.8296C9.04961 9.82472 9.05238 9.81979 9.05555 9.81504C9.05885 9.81011 9.0625 9.80549 9.06604 9.80077C9.06902 9.79679 9.07179 9.79271 9.07496 9.78883C9.08182 9.78047 9.08907 9.77242 9.09671 9.76477C9.09682 9.76464 9.09693 9.76452 9.09704 9.76441L10.4304 8.43101C10.5606 8.30083 10.7717 8.30083 10.9019 8.43101C11.032 8.56119 11.032 8.77226 10.9019 8.90244L10.1375 9.66678H13.9997C14.1838 9.66678 14.333 9.81602 14.333 10.0001C14.333 10.1842 14.1838 10.3335 13.9997 10.3335H10.1375L10.9019 11.0978C11.032 11.228 11.032 11.4391 10.9019 11.5692C10.7717 11.6994 10.5606 11.6994 10.4304 11.5692L9.09704 10.2358C9.09691 10.2357 9.09682 10.2356 9.09671 10.2355C9.08907 10.2278 9.08182 10.2197 9.07496 10.2114Z" fill="white"/>
</svg>
<small class="mt-1"><strong>Alleen beschikbaar voor desktop</strong></small>
</div>
{% endif %}
</div>
{% else %}
<div class="o-modal__header w-100 d-flex justify-content-end align-items-center position-relative">
<div class="o-modal__actions">
{% render '@circle', {icon:"close"}, true %}
</div>
</div>
<div class="o-modal__body{% if padding == 0 %} p-0{% endif %}{% if image %} m-auto{% endif %}">
{% if image %}
<img src="{{root}}{{img_folder}}{{image}}" alt="screenshot" class="o-modal__img h-100"></div>
{% else %}
{% if gif %}
<div class="text-center mb-4"><img src="{{root}}{{img_folder}}{{gif}}" alt="gif" class="o-modal__img -gif mx-auto rounded-circle d-inline-block"></div>
{% endif %}
<h1>{{title}}</h1>
{% if form == true %}
{% set text2="Opslaan" %}
{% render '@input-field-group', {label:"Naam"}, true %}
{% render '@datepicker', {label:"Datum"}, true %}
{% render '@select-field', {label:"Selecteer"}, true %}
{% render '@textarea-group', {label:"Toelichting"}, true %}
{% render '@upload-field', {label:"Bijbehorende documenten uploaden"}, true %}
{% elif confetti %}
{% set text1="Meer confetti" %}
{% set text2="Verder gaan" %}
{% set extraClass="js-triggerConfetti" %}
{% else %}
{% set text1="Annuleren" %}
{% set text2="Wijziging doorvoeren" %}
{% set extraClass="" %}
{% endif %}
{% if subtitle %}
<p class="text-center mb-4">{{subtitle}}</p>
{% endif %}
<div class="d-flex flex-column flex-xs-row">
{% render '@button--block-border', {text:text1, extraClass:extraClass}, true %}
{% render '@button--block', {text:text2}, true %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{
"title": "Wijzigen definitieve configuratie",
"subtitle": "Je hebt eerder al een definitieve keuze voor de configuratie doorgegeven. Weet je zeker dat je deze keuze wilt wijzigen?",
"handle": "",
"size": "medium",
"configurator": false,
"modal": true,
"form": false,
"loading": false,
"badge": false,
"gif": false,
"confetti": false,
"confetti_large": false,
"image": false
}
When a modal is opened, the following classes should be added to the body: compensateForScrollbar modalOpen overflow-hidden. When closing the modal these classes should be removed.
Also when a modal is opened the calcScrollbar() function should be executed. Applying these classes and functions will make it look to the user they can use the normal window scrollbar to scroll inside the modal box.