간단한 폼이 있는 모달

미리보기

소스

<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-team">
    간단한 폼이 있는 모달
</a>

<div class="modal modal-blur fade" id="modal-team" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">새 팀 추가</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3 align-items-end">
                    <div class="col-auto">
                        <a href="#" class="avatar avatar-upload rounded">
                            <i class="f:20 ti ti-plus"></i>
                            <span class="avatar-upload-text">추가</span>
                        </a>
                    </div>
                    <div class="col">
                        <label class="form-label">이름</label>
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">팀 색상 선택</label>
                    <div class="row g-2">
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="dark" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-dark"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput form-colorinput-light">
                                <input name="color" type="radio" value="white" class="form-colorinput-input" checked />
                                <span class="form-colorinput-color bg-white"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="blue" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-blue"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="azure" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-azure"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-indigo"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="purple" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-purple"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="pink" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-pink"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="red" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-red"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="orange" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-orange"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-yellow"></span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <label class="form-colorinput">
                                <input name="color" type="radio" value="lime" class="form-colorinput-input" />
                                <span class="form-colorinput-color bg-lime"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div>
                    <label class="form-label">추가 정보</label>
                    <textarea class="form-control"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn me-auto" data-bs-dismiss="modal">닫기</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">팀 추가</button>
            </div>
        </div>
    </div>
</div>