<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>

<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>