Menu
Modal container

Combine class .modal with .modal-static to disabled click background

<div id="modal" class="modal modal-static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="txt-normal">My modal box</h4>
                <i class="bx bx-x opacity-25 btn-close"></i>
            </div>
            <div class="modal-body">
                <p>My pretty modal box</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger btn-lg-1 btn-close">Undo</button>
                <button class="btn btn-primary btn-lg-1">Ok</button>
            </div>
        </div>
    </div>
</div>
Side modal container

Combine class .modal-dialog with .modal-side

<div id="modal" class="modal modal-static">
    <div class="modal-dialog modal-side">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="txt-normal">Side modal box</h4>
                <i class="bx bx-x opacity-25 btn-close"></i>
            </div>
            <div class="modal-body">
                <p>My pretty modal box</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary btn-lg-1 btn-close">Close</button>
            </div>
        </div>
    </div>
</div>
Modal position

Combine class .modal-dialog with one of the following classes

Shortcuts Render
.modal-top Renders the modal at the top center
.modal-top-start Positions the modal at the top left corner
.modal-top-end Places the modal at the top right corner
.modal-bottom Displays the modal at the bottom center
.modal-bottom-start Aligns the modal at the bottom left corner
.modal-bottom-end Positions the modal at the bottom right corner
.modal-start Renders the modal on the left center
.modal-end Places the modal on the right center
.modal-center Centers the modal in the viewport
Mixed sizing

Combine class .modal-dialog with one of the following classes

Shortcuts Render
.modal-w-25 Sets width to 25% of the viewport
.modal-w-50 Sets width to 50% of the viewport
.modal-w-75 Sets width to 75% of the viewport
.modal-w-100 Sets width to 100% of the viewport
.modal-h-25 Sets height to 25% of the viewport
.modal-h-50 Sets height to 50% of the viewport
.modal-h-75 Sets height to 75% of the viewport
.modal-h-100 Sets height to 100% of the viewport
Modal sizing

Combine class .modal-content with one of the following classes

Shortcuts Render
.modal-25 Sets dimensions to 25% of viewport
.modal-50 Sets dimensions to 50% of viewport
.modal-75 Sets dimensions to 75% of viewport
.modal-100 Sets dimensions to 100% of viewport