TIL-210508

"스터디 모집하러 가기" 버튼을 클릭하면 팝업을 띄우게 하고 싶었는데, 새 창에 띄우는 것이 아닌 현재 창에 띄우고 싶었다. 검색 결과 내가 원하는건 "모달"이라는 기능이였다. 해당 기능을 사용하는 법은 간단하다. (나는 부트스트랩 테마 elements를 적용시키기 위해 a 태그를 사용해서 모달을 적용했다.)

<p>이미 항해99 팀원들이 모집하는 스터디중에 원하는 스터디가 있는지 확인해보시고, 없다면 밑의 버튼을 눌러 새 스터디를 만들어보세요!</p>
<ul class="actions">
	<li>
		<a data-toggle="modal" href="#study-form" class="button big">스터디원 모집하러 가기</a>
	</li>
</ul>

다음과 같은 모양으로 버튼 a태그를 만들어준다. 참고로 a태그의 a는 anchor(닻)의 a라고 한다. 이 얼마나 항해다운가.

<!-- Modal -->
<div class="modal fade" id="study-form" role="dialog" style="z-index: 15000">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">스터디원 모집하기</h4>
            </div>
            <div class="modal-body">
                <form method="post" action="#">
                    <div class="row gtr-uniform">
                        <div class="col-12 col-12-xsmall form-label">
                            <label for="study-name">스터디 이름 : </label>
                            <input type="text" id="study-name" value="" style="width: 80%"
                                   placeholder="Name"/>
                        </div>
                        <div class="col-8 col-12-xsmall form-label">
                            <label for="datetimepicker1">스터디 시작 : </label>
                            <div class="input-group date" id="datetimepicker1" data-target-input="nearest"
                                 style="width: 70%">
                                <input type="text" class="form-control datetimepicker-input"
                                       data-target="#datetimepicker1">
                                <div class="input-group-append" data-target="#datetimepicker1"
                                     data-toggle="datetimepicker">
                                    <div class="input-group-text">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 col-12-xsmall form-label">
                            <input type="checkbox" id="join">
                            <label for="join">중도 참여 가능 여부</label>
                        </div>
                        <!-- Break -->
                        <div class="col-6 form-label">
                            <select name="demo-category" id="demo-category" style="width: 80%;">
                                <option value="">- 스터디 난이도 -</option>
                                <option value="3">무관</option>
                                <option value="2">하</option>
                                <option value="1">중</option>
                                <option value="0">상</option>
                            </select>
                        </div>
                        <!-- Break -->
                        <div class="col-6 form-label">
                            <select name="demo-category" id="demo-category" style="width: 80%;">
                                <option value="">- 스터디 방식 -</option>
                                <option value="0">감시형</option>
                                <option value="1">토이 프로젝트</option>
                                <option value="2">개인 프로젝트</option>
                                <option value="3">독서실</option>
                                <option value="4">기타(설명란 기재)</option>
                            </select>
                        </div>
                        <!-- Break -->
                        <div class="col-12 form-label">
                            <label for="study-explain"></label>
                            <textarea id="study-explain" placeholder="자세한 스터디 진행 방식을 공유해주세요."
                                      rows="6" style="width: 90%;"></textarea>
                        </div>
                        <!-- Break -->
                        <div class="col-12">
                            <ul class="actions">
                                <li><input type="submit" class="button primary small fit" value="Save"/>
                                </li>
                                <li><input type="button" class="button primary small fit"
                                           data-dismiss="modal" value="Close"/></li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

쓰다보니 카테고리에 id를 중복해서 넣은게 눈에띈다.
고치러 간다.