Default bootstrap modal template

By The Cookie jar

Heres a basic modal template that relies on bootstrap classes. If you install bootstrap on your website you can use this without modification.

<!-- Consent Modal -->
<form id="theCookieJarConsentBannerForm">
    <div class="modal fade show" id="consent-modal" tabindex="-1" aria-labelledby="consent_modal_label" aria-hidden="false" aria-live="assertive" style="display: block;">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content bg-primary">
                <div class="modal-header">
                    <p class="h4 modal-title text-white disabled" id="consent_modal_label">Your Privacy</p>
                </div>
                <div class="modal-body text-white">
                    <p class="text-white text-xs">
                        Welcome! We’re glad you’re here and want you to know that we respect your privacy and your right to control how we collect, use, and share your personal data. Listed below are the purposes for which we process your data–please indicate whether you consent to such processing.
                    </p>
                    <p class="h6 fw-500">Cookies We Use</p>
                    <div class="accordion-primary accordion accordion-flush" id="accordionFlushConsent">
                        <div class="accordion-item border-bottom bg-primary">
                            <div class="accordion-header d-flex align-items-center" id="flush-AnalyticsConsent">
                                <div style="font-size: medium; outline: 0 !important; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;" class="accordion-button collapsed fw-500 no-caret ms-0 me-2 ps-0 bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#flush-AnalyticsConsentContent" aria-expanded="false" aria-controls="flush-AnalyticsConsentContent">
                                    Analytics
                                </div>
                                <div class="ms-auto form-check form-switch">
                                    <input class="form-check-input toggle-switch" type="checkbox" role="switch" id="analytics_storage" value="granted" checked onchange="this.value=this.checked?'granted':'denied';">
                                </div>
                            </div>
                            <div id="flush-AnalyticsConsentContent" class="accordion-collapse collapse" aria-labelledby="flush-AnalyticsConsent" data-bs-parent="#accordionFlushConsent">
                                <div class="">
                                    <p class="text-xs text-white">
                                        Analytics is essential for helping us improve our website and your experience with it. Analytics cookies are used to understand user interactions on our website and are not used for targeting in advertising.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-bottom bg-primary">
                            <div class="accordion-header d-flex align-items-center" id="flush-AdvertisingConsent">
                                <div style="font-size: medium; outline: 0 !important; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;" class="accordion-button collapsed fw-500 no-caret ms-0 me-2 ps-0 bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#flush-AdvertisingConsentContent" aria-expanded="false" aria-controls="flush-AdvertisingConsentContent">
                                    Advertising
                                </div>
                                <div class="ms-auto form-check form-switch">
                                    <input class="form-check-input toggle-switch" type="checkbox" role="switch" id="ad_storage" value="granted" checked onchange="this.value=this.checked?'granted':'denied';">
                                </div>
                            </div>
                            <div id="flush-AdvertisingConsentContent" class="accordion-collapse collapse" aria-labelledby="flush-AdvertisingConsent" data-bs-parent="#accordionFlushConsent">
                                <div class="">
                                    <p class="text-xs text-white">
                                        We use advertising cookies to ensure that our advertising is relevant to you and give you the best experience possible.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-bottom bg-primary">
                            <div class="accordion-header d-flex align-items-center" id="flush-EssentialConsent">
                                <div style="font-size: medium; outline: 0 !important; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;" class="accordion-button collapsed fw-500 no-caret ms-0 me-2 ps-0 bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#flush-EssentialConsentContent" aria-expanded="false" aria-controls="flush-EssentialConsentContent">
                                    Essential Cookies
                                </div>
                                <div class="ms-auto form-check form-switch">
                                    <input class="form-check-input toggle-switch" type="checkbox" role="switch" id="functionality_storage" value="granted" disabled checked>
                                </div>
                            </div>
                            <div id="flush-EssentialConsentContent" class="accordion-collapse collapse" aria-labelledby="flush-EssentialConsent" data-bs-parent="#accordionFlushConsent">
                                <div class="">
                                    <p class="text-xs text-white">
                                        Collection and processing of personal data to enable functionality that is essential to providing our services, including security activities, debugging, authentication, and fraud prevention, as well as contacting you with information related to products/services you have used or purchased; we may set essential cookies or other trackers for these purposes.
                                    </p>
                                    <p class="text-xs fw-600 text-white">Legal Basis</p>
                                    <p class="text-xs text-white">Necessary for the purposes of the legitimate interests pursued by the controller or by a third party, except where such interests are overridden by the interests or fundamental rights and freedoms of the data subject</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="text" style="display: none;" autofocus>
                    <button type="submit" class="btn bg-secondary btn-sm fw-700 me-2 text-white" data-bs-dismiss="modal">Save choices</button>
                </div>
                <a href="https://cookieconsentjar.com/" class="position-absolute start-0 bottom-0 p-3 pb-2 ps-3 mb-1 d-flex align-items-end">
                    <small><span class="text-white me-1">Powered by</span></small>
                    <img style="max-height: 12px;" src="https://storage.googleapis.com/thecookiejar_prod/img/logo.webp" alt="Consent Manager Logo" class="mb-1" />
                </a>
            </div>
        </div>
    </div>
</form>
Was this page helpful?
Further questions? You can reach out via email.