스케줄러 만들기 3 - Modal Box 만들기(일정 추가 팝업)

오늘은 저번에 이어 alert로 그냥 일반 알림 창이 나오는 것을 바꿔서 팝업 창이 뜨도록 했다.

검색을 하여 다른 분의 코드를 참고하고 응용해서 작성해보았다.

 

팝업 창을 만들기 위한 순서는 아래와 같다.

1. html에서 modal을 생성해주기

2. css를 작성해주기

3. js로 작업 처리해주기

 

1. html에서 modal을 생성해주기

우선 modal box를 만들어주어야 한다. 내 경우는 이 박스 안에 텍스트 이외의 것들도 들어가야 하므로 추가로 코드를 작성하였다.

<!--화면을 클릭했을 때 일정 추가하라고 나오는 버튼-->
     <div id="myModal" class="modal">
      <div class= "modal-content">
         <span class="close">&times;</span>
         <p>오늘의 일정추가</p>
         <input name = "t_schedule" type="text" value=" "/>
         <br><br> 
         <input type="button" name="add" value="Add"/>
         <input type="button" name="cancel" value="Cancel"/>
      </div>
     </div>

text이외에도 보면 일정 추가를 입력받귀 위한 text필드와 add와 cancel 버튼 두 개를 만들었다.

그러나 생각해보니, x표시를 누르거나 화면을 누르면 뒤로 가는 처리를 해버려서... 이부분은 다음에 다시 수정해야 할 것 같다. 이렇게 되면 굳이 cancel 버튼이 의미 없어지기 때문에.. 과제라면 정확히 표현해야하니 추후에 고쳐야겠다.

 

2. css를 작성해주기

다음은 css를 작성해주었다. 본래는 투명색이여서 보이지 않기 때문에 이 부분에 대해서 모두 설정해 주어야 한다.

.modal {
       text-align: center;
       display: none;
       position: fixed;
       z-index: 1;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgb(0, 0, 0); 
       background-color: rgba(0, 0, 0, 0.4); 
   }
   
   .modal-content {
       text-align: center;
       background-color: #fefefe;
       margin: 15% auto;
       padding: 10px;
       border: 1px solid #888;
       height: 150px;
       width: 250px;
   }
   .close {
       color: #aaa;
       float: right;
       font-size: 18px;
       font-weight: bold;
   }
   .close:hover,
   .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
   }

modal이 전체적인 창, background에 관한 설정이다. 이것을 만지니 과도하게 줄었더니 바탕이 줄면서 안에 있는 content까지 줄어버리더라...

 

modal-content는 그 박스 안에 있는 세부 설정을 할 수 있다. 박스의 설정을 하는 것이다. 

이 안의 height와 width로 박스의 크기를 조절하고 고정할 수 있다. px로 주면 고정, %로 주면 화면에 따라 자유롭게 변환할 수 있다. 나는 고정을 해서 사용했다.

 

3. js로 작업 처리해주기

마지막으로 화면이 눌렀을 때 떠야하기 때문에 저번에 alert처리를 해 놓았던 곳에 이 코드를 작성해주었다.

전체적인 코드는 다음과 같다.

//알림창 설정에 대해 필요한 것들 html에서 가져오기
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
 
var td = document.querySelectorAll('td'); //모든 태그에 대해 알림창 설정
 
for(var i=0; i<td.length; i++){
    if(i>=(today_days+null_days-1)){ //여기에서만 실행되도록 정하기 today_days+null_days-1는 현재 날짜 전까지의 인덱스를 표현한 것
   
        td[i].ondblclick = function() {
            modal.style.display = "block";
        };
    } 
}
 
span.onclick = function(event){
    modal.style.display = "none";
 }
 
 window.onclick = function(event){
     if(event.target == modal){
         modal.style.display = "none";
     }
 }
 

우선 맨 위 두줄은 html에서 선언했던 id를 가져와 js에서 변수로 선언해줍니다. 그리고 이들을 이용하여

평소에는 none인 상태로 가려두고, 클릭했을때만 block으로 표현하여 나타내줍니다.

 

또한 span은 오른쪽 창의 X표시를 클릭했을 때 해주는 동작으로, 저 함수가 없으면 X 표시가 있다고 하더라도 눌렀을 때 아무런 동작을 하지 않습니다. 창이 없어지지 않는거죠. 

window도 같은 맥락으로 저 함수가 없으면 화면을 클릭해도 나가지지 않고, 현재는 존재하니 그냥 화면 밖 어느곳을 눌러도 창이 없어지는 모습을 볼 수 있습니다.