[html/javascript] 모달 팝업창 구현

 진행하고 있는 프로젝트 중에서 웹페이지 내부에 '알림창'을 띄울 수 있는 방법이 있는지 찾아보던 중 <모달 팝업>이라는 기능을 발견했다. 

 크롬 알람과는 달리 서버가 필요없이 웹페이지 내부에서 원할때 띄운다는 점, 새창이 아니라는 점이 내가 원하는 기능과 부합했다.

 

1. 구현

 

[HTML]

 <button type='button' id="modal_btn">바른 자세란?</button>
<div class="black_bg"></div>
<div class="modal_wrap">
  <div class="modal_close"><a href="#">close</a></div>
  <div class="modal_text">
    <img src="/img/gyojung.png" id="imggj"> <br><br>
    양쪽 어깨와 얼굴이 화면에 모두 위치하도록 자세를 조정해주세요.<br> 가슴과 어깨를 펴고, 턱을 가볍게 안쪽으로 당겨주세요! <br>
    모니터와 화면 사이의 거리는 40cm 이상으로 두고, <br>눈이 모니터의 2/3지점을 바라보게 해주세요!
  </div>
</div>
</div>

 

<바른 자세란?> 버튼을 누르면 이미지와 글씨가 나오도록 하는 코드이다.

 

[CSS]

button {
  flex-grow: 1;
  height: 3.5rem;
  min-width: 2rem;
  border: none;
  border-radius: 0.15rem;
  background: #bdc9a6;
  margin-left: 2px;
  box-shadow: inset 0 -0.15rem 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#ffffff;
  font-weight: bold;
  font-size: 1.5rem;
}
button:hover, button:focus {
  outline: none;
  background: #82b8adff;
}

.modal_wrap{
        display: none;
        width: 500px;
        height: 600px;
        position: absolute;
        top:50%;
        left: 50%;
        margin: -375px 0 0 -250px;
        background:#eee;
        z-index: 2;
    }
    .black_bg{
    display: none;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color:rgba(0, 0,0, 0.5);
    top:0;
    left: 0;
    z-index: 1;
}

.modal_close{
    width: 26px;
    height: 26px;
    position: absolute;
    top: -30px;
    right: 0;
}


.modal_close> a{
        display: block;
        width: 100%;
        height: 100%;
        background:url(https://img.icons8.com/metro/26/000000/close-window.png);
        text-indent: -9999px;
    }

.modal_text {
  text-align: center;
  padding: 20px;
  font-family: '서울한강 장체B', sans-serif;
  font-size : 24px;
}

button에 효과를 주기 위해서 조금 길어져 버렸지만, 어쨌든 이렇다.

버튼을 누르면 뒷배경에 음영이 떠오르고 닫기버튼 X도 만들어놓고, 텍스트에 폰트도 넣어봤다. '서울한강 장체B'가 없다면 기본 글꼴로 표시된다.

 더 추가해보고 싶은 것은 사용자의 세팅과 상관없이 일관적인 출력인데, css를 좀 더 건드려봐야 할 듯 싶다.

 

[JAVAscript]

 

    window.onload = function() {

    function onClick() {
        document.querySelector('.modal_wrap').style.display ='block';
        document.querySelector('.black_bg').style.display ='block';
    }
    function offClick() {
        document.querySelector('.modal_wrap').style.display ='none';
        document.querySelector('.black_bg').style.display ='none';
    }

    document.getElementById('modal_btn').addEventListener('click', onClick);
    document.querySelector('.modal_close').addEventListener('click', offClick);

 

모달 팝업창을 크고 끌 수 있도록 하는 함수이다. 아주 간단한 코드이니 읽어보는 것으로도 무슨 기능인지 알 수 있다.

 

 

2. 결과

 

html에서 구현모습

 

 

버튼을 누르면 이와같이 모달 팝업창이 뜬다.

아쉬운 점은 css관련사항인데, 창 크기가 절대적인 크기라 사용자마다 다르게 보일 수도 있다는 점이다. 글씨나 이미지가 창 밖으로 튀어나온다는 것이다.

 상대적인 크기로 바꿀만한 방법을 찾아봐야 할 듯 싶다.

 

3. 참고

https://ddorang-d.tistory.com/97