_modal.twig

<div class="hidden cookie-modal fixed w-full max-h-screen p-4 overflow-y-auto z-100 sm:max-w-modal top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2" id="cookieModal" role="dialog" aria-modal="true" aria-labelledby="cookie_settings_title" tabindex="-1">
    <div class="cookie-modal__content relative p-6 text-sm bg-white rounded-lg shadow-md">
        <button type="button" class="cookie-modal__close-action absolute top-0 right-0 mt-6 mr-8 js-modal-close-btn notranslate">
            <svg xmlns="http://www.w3.org/2000/svg" class="cookie-modal__close-icon w-5 h-5 pointer-events-none" width="48" height="48" viewBox="0 0 48 48"><path d="M38 12.83L35.17 10 24 21.17 12.83 10 10 12.83 21.17 24 10 35.17 12.83 38 24 26.83 35.17 38 38 35.17 26.83 24z"/></svg>
            <span class="sr-only">
                {{ "Sluit cookie instellingen"|t('cookie-banner')}}
            </span>
        </button>
        <h1 id="cookie_settings_title" class="mb-1 text-xl sm:text-2xl">{{ 'Cookie-instellingen'|t('cookie-banner') }}</h1>
        <p>
            {{ 'Onze website bewaart vier soorten cookies. Je kan zelf op elk moment kiezen welke je aanvaardt en welke niet. Meer informatie over wat cookies zijn en welke types cookies we verzamelen kan je lezen in ons <a href="{cookieLink}" target="_blank" class="underline hover:no-underline">cookiebeleid</a>.'|t('cookie-banner',{cookieLink: cookiePage.getUrl() ?? craft.entries.section('cookiePolicy').one().getUrl() ?? ''})|raw }}
        </p>
        <div class="cookie-modal__actions mt-4 text-center" data-site="{{ currentSite.id }}">
            <a href="#" class="btn btn--primary js-cookie-accept notranslate">{{ 'Alle cookies aanvaarden'|t('cookie-banner') }}</a>
        </div>
        <h2 class="mt-4 mb-1 text-lg">{{ 'Je voorkeuren aanpassen'|t('cookie-banner') }}</h2>
        <form>
            <div class="cookie-modal__options mb-4">
                <div class="cookie-modal__checks flex items-center text-base font-bold">
                    <input class="js-cookie-essential mr-4" type="checkbox" name="essential" id="essential" disabled checked>
                    <label for="essential">{{ 'Essentiële cookies'|t('cookie-banner') }}</label>
                </div>
                <div class="cookie-modal__description ml-8">
                    {{ 'zijn om technische redenen noodzakelijk voor de goede werking. Zonder deze cookies zou het kunnen dat de website niet naar behoren functioneert.'|t('cookie-banner') }}
                </div>
            </div>
            <div class="cookie-modal__options mb-4">
                <div class="cookie-modal__checks flex items-center text-base font-bold">
                    <input class="js-cookie-essential mr-4" type="checkbox" name="functional" id="functional" disabled checked>
                    <label for="functional">{{ 'Functionele cookies'|t('cookie-banner') }}</label>
                </div>
                <div class="cookie-modal__description ml-8">
                    {{ 'zijn noodzakelijk voor bepaalde functies op de website. Zonder deze cookies kunnen sommige onderdelen onbruikbaar worden.'|t('cookie-banner') }}
                </div>
            </div>
            <div class="cookie-modal__options mb-4">
                <div class="cookie-modal__checks flex items-center text-base font-bold">
                    <input class="js-cookie-performance mr-4" type="checkbox" name="CookiePerformance" id="performance" value="2">
                    <label for="performance">{{ 'Analytische cookies'|t('cookie-banner') }}</label>
                </div>
                <div class="cookie-modal__description ml-8">
                    {{ 'laten ons toe om het gebruik van de website anoniem te analyseren en de gebruikservaring te verbeteren.'|t('cookie-banner') }}
                </div>
            </div>
            <div class="cookie-modal__options mb-4">
                <div class="cookie-modal__checks flex items-center text-base font-bold">
                    <input class="js-cookie-marketing mr-4" type="checkbox" name="CookieMarketing" id="marketing" value="3">
                    <label for="marketing">{{ 'Marketingcookies'|t('cookie-banner') }}</label>
                </div>
                <div class="cookie-modal__description ml-8">
                    {{ 'hebben als doel het personaliseren van de gebruikservaring en het tonen van relevante inhoud en aanbiedingen op deze en andere websites.'|t('cookie-banner') }}
                </div>
            </div>
            <div class="cookie-modal__actions" data-site="{{ currentSite.id }}">
                <button type="submit" class="btn btn--primary js-modal-close notranslate">{{ 'Mijn keuze bewaren'|t('cookie-banner') }}</button>
            </div>
        </form>
    </div>
</div>