내일배움캠프 12일차 개발일지

# TIL

 

팀 프로젝트 마감기한이 점점 다가오고있다. 준비는 어느정도 됬지만, 작성된 코드의 전체적인 이해와 추가기능 구현을 진행했다.

bootstrap을 이용한 modal 활용 (블로그 리뷰창 만들기) 
모달창을 사용하기위해 추가해줘야하는 부분 (JS)

var myModal = document.getElementById('myModal')

myModal.addEventListener('showns.bs.modal', function (){
    myModal.focus()
})​

html 부분의 모달창의 형태

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">한 줄 리뷰 작성하기</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">작성자:</label>
                        <input type="text" class="form-control" id="user">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">리뷰를 달아주세요:</label>
                        <textarea class="form-control" id="review"></textarea>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
                <button type="button" onclick="getreview() " class="btn btn-primary">작성 완료</button>
            </div>
        </div>
    </div>
</div>​

구현화면