제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기

모달창이란?

우리가 흔히 화면을 개발할 때 많이 쓰는 요소로, 보통 레이어 팝업이라고도 합더

모달은 화면 위에 레이어를 더 만들어 부가적인 일을 처리할 수 있게 만드는 기능이다.

 

먼저 html을 만들겠습니다.

<button>모달창 나와랏!</button>

 

모달창을 열고 닫을  button이 필요 합니다.

다른 태그로 만들어도 상관은 없습니다.

 

이제 모달창이 필요 하니, 모달창을 만들어 줍니다

그리고 이어서 모달창을 만들어 줍니다.

<div id="modal" class="dialog">
  <div class="tb">
    <div class="inner" style="max-width:800px;"">
      <div class="top">
	      <div class="title">모달창 제목</div>
        <a href="#" class="p_close">닫기</a>
      </div>
      <div class="ct">
      모달 창 내용
      </div>
    </div>
  </div>
</div>

 

 

위와 같이 작성해 보면 이렇게 나오게 된다.

아직 CSS를 작성하지 않아서, 위와 같은 볼품없는 스타일로 나오게 된다.

이제 여기에 CSS를 작성해 줍니다.

 

위의 코드에서 .inner의 max-width 값을 인라인으로 만든 것은 코드를 다른 곳에서 재사용 할때 width값을 유동적으로 가져가기 위함이다.

 

.dialog {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.dialog>.tb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.dialog>.tb .inner {
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
}

.dialog .top {
  display: flex;
  align-item: center;
  border-bottom: 1px solid #ddd;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.dialog .title {
  font-weight: bold;
  font-size: 20px;
}

.dialog .ct {
  max-height: 60vh;
  height: 60vh;
  overflow-y: auto;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
}

 

위와 같이 작성하면 우리가 알고 있는 모달창의 형태를 띄게 된다.

 

하지만 보통 모달창은 숨겨져 있기에, .dialog의 display를 none으로 바꿔 줍니다.

 

이제 마지막으로 JQuery를 작성해줍니다.

//모달 열기
function modal(id){
  $("#" + id).fadeIn()
}

//모달 닫기
$('.modal-close').on('click', function(e){
  e.preventDefault();
  const modal = $(this).parents('.dialog');
  modal.fadeOut();
});

 

모달창을 여는 이벤트와 닫기 이벤트를 작성했습니다.

하지만 열기는 함수로 작성해 두었기 때문에, 버튼에 추가적인 작업을 해야 합니다.

 

<button onClick="modal('dialog')">모달창 나와랏!</button>

 

button태그에 미리 작성한 modal함수를 onClick 이벤트로 넣어주면 완성입니다.

button 태그를 클릭 했을때 dialog라는 id를 가진 요소를 보여주게 되는데, 다른 모달창을 만들때 id값만 바꿔주면 손 쉽게 모달창을 만들 수 있습니다.

Class로 하고 싶으신 분들은  $("#" + id).fadeIn()에서 #대신 .을 사용하면 클래스로도 적용이 가능합니다.

반응형

최종 코드

See the Pen Untitled by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

 

오늘의 포스팅은 여기까지입니다.

끝까지 읽어주셔서 감사합니다.