[HTML] 모달창(Modal) 만들기

모달(Modal)은 새창을 띄우지 않고 기존의 브라우저에서 레이어가 하나 생기 듯 새로운 창이 보이는 것을 말한다.

기존의 페이지와 부모- 자식 관계이며 새창 제어 옵셩에는 전혀 영향을 받지 않는다.

 

목적

•  프로모션을 진행, 서비스에 대한 공지, 안내문 등
• 새로운 창을 통해 기존의 브라우저에 영향을 줘야할 때

실제 프로젝트에 사용한 것은 모달창이 뜨면 게시판 검색 버튼을 통해 ajax로 데이터를 불러와 데이터가 표출되며, 

게시글 클릭 시 원하는 값을 선택할 수 있도록 구현하였다.

여기서는  간단하게 버튼을 클릭하면 모달창이 뜨며, 모달의 내용에는 기본 게시판이 보여지도록 구현하였다.

---

 

1. STYLE

<style>
/*모달창*/
.modal {display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	overflow-y: auto;
	border: 2px solid grey;
	border-radius: 5px;
	z-index: 9999;}
.modal-content {
	position: absolute; /* close 버튼을 상대적으로 위치 설정 */
	top: 50%; /* 모달 창의 상단을 화면의 중앙으로 이동 */
	left: 50%; /* 모달 창의 좌측을 화면의 중앙으로 이동 */
	transform: translate(-50%, -50%); /* 모달 창을 수평 및 수직으로 중앙 정렬 */
	background-color: white;
	width: 50%;
	height: 60%;
	padding: 40px;
	border-radius: 20px;
	}
.modalTitle{
	margin-bottom: 10px;
	font-size: 1.5em;color: #000;
	font-weight: bold;}
.close {
	position: absolute; /* close 버튼을 절대적으로 위치 설정 */
	top: 20px; /* close 버튼의 상단 여백 설정 */
	right: 20px; /* close 버튼의 우측 여백 설정 */
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
	}
.close:hover {color: red;}
.modal-open {overflow: hidden; /* 스크롤 막기 */}

/* 테이블 */
#fl{ height: 15px;}
table { width: 100%; border: 1px solid #444444; border-collapse: collapse;}
th, td {border: 1px solid #444444; }
.paging{text-align: center;}

</style>

 

2. HTML

<button id="modalBtn">모달창 버튼</button>

<!-- 모달창 -->
<div id="modal" class="modal">
  <div class="modal-content" style="height:auto;">
    <span class="close">&times;</span>
    <p class="modalTitle">모달창 게시판</p>
    <br/>
    <div class="boardSearch">
      <div class="v2"><!-- v1 -->
        <div class="search fl">
          <label for="searchType" class="blind">검색항목</label>
          <select name="searchType" id="searchType" title="검색항목">
            <option value="ADMIN_NAME">모달이름</option>
            <option value="ADMIN_ID">모달분류</option>
          </select>
          <label for="keyword" class="blind">검색어 입력</label>
          <input name="keyword" id="keyword" type="text" class="input_text" title="검색어 입력" value="" style="width:50%;">
          <button onclick="adminSearch();" id="searchSubmit" class="submit">검색</button>
        </div>
      </div>
    </div>
    <br/>
    <div class="board">
      <table class="basicList">
      	<colgroup>
      		<col width="10%">
      		<col width="20%">
      		<col width="20%">
      		<col width="25%">
      		<col width="20%">
      	</colgroup>
        <thead>
        <tr>
          <th class="inter_sbgc"scope="col">번호</th>
          <th class="inter_sbgc"scope="col">모달이름</th>
          <th class="inter_sbgc"scope="col">모달설명</th>
          <th class="inter_sbgc"scope="col">모달분류</th>
          <th class="inter_sbgc"scope="col">모달생성</th>
        </thead>
        <tbody id="tableBody">
        <tr>
          <td>1</td>
          <td>모달창1번</td>
          <td>모달창이 좋아요</td>
          <td>모달</td>
          <td>생성완료</td>
        </tr>
	<tr>
          <td>2</td>
          <td>모달창2번</td>
          <td>모달창이 좋아요</td>
          <td>모달</td>
          <td>생성완료</td>
        </tr>
        </tbody>
      </table>
    </div>
    <br/>
    <div class="paging" id="paging">
      <a href="#"><</a>
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">></a>
    </div>
  </div>
</div>

 

3. SCRIPT

<!-- 모달창 여닫는 script -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>

  $(document).ready(function() {
    const modal = $("#modal");
    const modalBtn = $("#modalBtn");
    const closeBtn = $(".close");

    // 모달 열기 버튼 클릭 시 이벤트 처리
    modalBtn.on("click", function() {
      modal.css("display", "block");
      $("body").addClass("modal-open"); // 스크롤 막는 클래스 추가
    });

    // 모달 닫기 버튼 클릭 시 이벤트 처리
    closeBtn.on("click", function() {
      modal.css("display", "none");
      $("body").removeClass("modal-open"); // 스크롤 막는 클래스 제거
    });

    // 모달 영역 외부 클릭 시 모달 닫기
    $(window).on("click", function(event) {
      if (event.target === modal[0]) {
        modal.css("display", "none");
        $("body").removeClass("modal-open"); // 스크롤 막는 클래스 제거
      }
    });
  });

</script>

 

3. 결과

모달창 버튼 클릭 시 모달창이 뜨며 게시판이 보여진다. 

x 버튼을 통해 모달창을 닫을 수 있고 모달 밖 어두운 화면을 통해 닫을 수 있다. 

 

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)