Modal

Allows to use Bootstrap Modals but with the native dialog element and without the need of Bootstrap’s JavaScript.

Code

<button type="button" class="btn blue-btn-soft-primary" onclick="my_modal.showModal()">Open modal</button>

<dialog class="blue-modal modal" id="my_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">Modal title</h1>
                <form method="dialog" style="display: contents;">
                    <button type="submit" class="btn-close" aria-label="Close"></button>
                </form>
            </div>
            <div class="modal-body">Hello World</div>
        </div>
    </div>
    <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
</dialog>

Offcanvas

Because Bootstrap Offcanvas works quite similar, you can also use .blue-modal with that.

Code

<button type="button" class="btn blue-btn-soft-primary" onclick="my_offcanvas.showModal()">Open offcanvas</button>

<dialog class="blue-modal modal" id="my_offcanvas">
    <div class="offcanvas offcanvas-start show">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
            <form method="dialog" style="display: contents;">
                <button type="submit" class="btn-close" aria-label="Close"></button>
            </form>
        </div>
        <div class="offcanvas-body">
            <div>
                Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images,
                lists, etc.
            </div>
        </div>
    </div>
    <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
</dialog>

Code

<section>
    <button type="button" class="btn blue-btn-soft-primary" onclick="my_offcanvas2.showModal()">Open offcanvas</button>

    <dialog class="blue-modal modal" id="my_offcanvas2">
        <div class="offcanvas offcanvas-start show">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                <form method="dialog" style="display: contents;">
                    <button type="submit" class="btn-close" aria-label="Close"></button>
                </form>
            </div>
            <div class="offcanvas-body">
                <div>
                    Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
                    images, lists, etc.
                </div>

                <button type="button" class="btn blue-btn-soft-primary" onclick="my_modal2.showModal()">
                    Open modal
                </button>

                <dialog class="blue-modal modal" id="my_modal2">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5">Modal title</h1>
                                <form method="dialog" style="display: contents;">
                                    <button type="submit" class="btn-close" aria-label="Close"></button>
                                </form>
                            </div>
                            <div class="modal-body">Hello World</div>
                        </div>
                    </div>
                    <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
                </dialog>
            </div>
        </div>
        <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
    </dialog>
</section>

Edit post on GitHub

Offcanvas

Modal in Offcanvas