Maxima's Lab

[Web Programming] Modal Dialog 커스터마이징 하는 방법 본문

Web Programming

[Web Programming] Modal Dialog 커스터마이징 하는 방법

Minima 2024. 2. 23. 23:27
728x90
SMALL

안녕하세요, 오늘은 Modal Dialog 기능들에 대해서 커스터마이징 하는 방법에 대해서 알아보겠습니다.

 

해당 기능을 구현하기 위해 편의상 html, css, js 파일에 대해 다음과 같이 구성하였습니다.

 

  • index.html
  • style.css
  • script.js

위 파일들로 구성된 결과 이미지에 대해서 먼저 보도록 하겠습니다.

 

Modal Dialog 실행 결과

 

먼저 index.html 코드는 다음과 같습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Modal Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>


<button id="openModalCenterBtn">모달 실행</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>사용자 정의 메시지를 입력하세요...</p>
    <button id="okBtn" style="width: 50px;">확인</button>
    <button id="cancelBtn" style="width: 50px;">취소</button>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

 

위의 코드에서 button은 총 3개로 구성되어 있으며, 다음과 같습니다.

  1. 모달 실행
  2. 확인
  3. 취소

이어서, style.css 코드는 다음과 같습니다.

 

/* 모달 스타일 */
.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed; /* 화면에 고정, 필요시 absolute로 변경 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 중앙 정렬 */
    width: 400px; /* 너비 */
    height: 200px; /* 높이 */
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    z-index: 1; /* 다른 요소 위에 표시 */
  }
  
  /* 닫기 버튼 스타일 */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

 

마지막으로, script.js 코드입니다.

 

document.addEventListener("DOMContentLoaded", function() {
    var modal = document.getElementById("myModal");
    var btnCenter = document.getElementById("openModalCenterBtn");
    var btnOkay = document.getElementById("okBtn");
    var btnCancel = document.getElementById("cancelBtn");
    var span = document.getElementsByClassName("close")[0];
  
    btnCenter.onclick = function() {
      modal.style.display = "block";
      modal.style.position = "fixed";
      modal.style.left = "50%";
      modal.style.top = "50%";
      modal.style.transform = "translate(-50%, -50%)";
    }
  
    span.onclick = function() {
      modal.style.display = "none";
    }

    btnOkay.onclick = function() {
        modal.style.display = "none";
    }

    btnCancel.onclick = function() {
        modal.style.display = "none";
    }
  
  });

 

모달 실행 시 화면 중앙에서 실행되도록 하였으며, 최초에 .modal을 "none" 상태 였다가 모달 실행 버튼 클릭 시 "block" 상태로 바뀌면서 Modal Dialog가 실행되게 됩니다. 추가적으로, 확인 및 취소 버튼 클릭에 따라 "none" 상태로 변화하도록 하였습니다. 필요에 따라, btnOkay.onclick과 btnCancel.onclick 부분을 추가 Customize 할 수 있습니다.

 

 

이상으로, Modal Dialog 기능에 대해서 커스터마이징 하는 방법에 대해서 알아보았습니다.

감사드립니다.

728x90
LIST
저작자표시 비영리 변경금지

'Web Programming' 카테고리의 다른 글

[Vue.js 3 + Vuetify 3] File inputs (Component) 사용법  (0) 2024.03.12
[Vue.js 3 + Vuetify 3] Vuetify 3 설치 및 적용하는 방법  (0) 2024.03.11
[Flask] Flask 모듈화 방법 (Blueprint) & current_app  (0) 2023.11.13
[Flask] Scheduler 사용법 (APScheduler 패키지)  (0) 2023.11.06
[Web Programming] Vue.js 설치 및 실행 방법 (w/ Node.js)  (1) 2023.10.28
'Web Programming' Related Articles more
Comments