모달의 기본 구조는 .xe-modal-header, .xe-modal-body, .xe-modal-footer로 구성되어 있습니다.

<div class="xe-modal fade" id="Modal" style="position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 1; display: block;">
    <div class="xe-modal-dialog" style="transform: none;margin: 0">        <div class="xe-modal-content">
            <div class="xe-modal-header">
                <button type="button" class="btn-close" data-dismiss="xe-modal" aria-label="Close"><i class="xi-close"></i></button>
                <strong class="xe-modal-title">Modal title</strong>
            </div>
            <div class="xe-modal-body">
                <p>
                    modal-body ...
                </p>
            </div>
            <div class="xe-modal-footer">
                <button type="button" class="xe-btn xe-btn-secondary" data-dismiss="xe-modal">취소</button>
                <button type="button" class="xe-btn xe-btn-primary" data-dismiss="xe-modal">저장</button>
            </div>
        </div>
    </div>
</div>

.xe-modal-lg, .xe-modal-sm 클래스를 통해 모달 사이지를 지정할 수 있습니다.

<div class="xe-modal fade" id="Modal-sm">
    <div class="xe-modal-dialog xe-modal-sm">
        <div class="xe-modal-content">
            <div class="xe-modal-header">
                <button type="button" class="btn-close" data-dismiss="xe-modal" aria-label="Close"><i class="xi-close"></i></button>
                <strong class="xe-modal-title">Modal title</strong>
            </div>
            <div class="xe-modal-body">
                <p>
                    modal-body ...
                </p>
            </div>
            <div class="xe-modal-footer">
                <button type="button" class="xe-btn xe-btn-secondary" data-dismiss="xe-modal">취소</button>
                <button type="button" class="xe-btn xe-btn-primary" data-dismiss="xe-modal">저장</button>
            </div>
        </div>
    </div>
</div>
<div class="xe-modal fade" id="Modal-lg">
    <div class="xe-modal-dialog xe-modal-lg">
        <div class="xe-modal-content">
            <div class="xe-modal-header">
                <button type="button" class="btn-close" data-dismiss="xe-modal" aria-label="Close"><i class="xi-close"></i></button>
                <strong class="xe-modal-title">Modal title</strong>
            </div>
            <div class="xe-modal-body">
                <p>
                    modal-body ...
                </p>
            </div>
            <div class="xe-modal-footer">
                <button type="button" class="xe-btn xe-btn-secondary" data-dismiss="xe-modal">취소</button>
                <button type="button" class="xe-btn xe-btn-primary" data-dismiss="xe-modal">저장</button>
            </div>
        </div>
    </div>
</div>