생각 작업실 The atelier of thinking

24. <JavaScript> 예제 - 모달 Modal 본문

웹(Web) 이야기

24. <JavaScript> 예제 - 모달 Modal

knowledge-seeker 2024. 3. 5. 16:55

지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다.

처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다 이것이 어떤 원리로 웹페이지에 작동하는 지에 대해 모르는 상태에서 코드를 혼자 만들어 보려하니 막막하기만 하고 한 줄 작성하기 힘들었던 것이었습니다.

도움이 되었던 것은 이미 만들어진 코드를 보면서 하나씩 어떻게 연결되는 지 어떤 원리로 작동하는 지 찾아보는 것이었습니다.

처음부터 JavaScript의 모든 문법 및 구문을 다 배우고 난 후에 코드를 작성하는 것은 너무나 어려운 일 입니다. 이미 만들어진 코드를 보면서 그것에 대한 문법과 구문을 이해하는 것이 더 효율적이라 생각합니다.

앞으로는 실제 웹페이지에 적용해 볼 수 있는 JavaScript 예제를 통하여 HTML/CSS와 어떻게 상호작용하고 연결되는 지에 대해 알아보고자 합니다.

이번 회차에 소개할 예제는 모달창입니다.

1. 모달 Modal 이란?

 

모달은 웹 디자인에서 사용자에게 어떤 정보를 보여주거나 추가 작업을 수행하도록 하는데 사용되는 UI 요소입니다. 일반적으로 현재 화면 위에 떠다니는 형태로 표시되며, 사용자가 모달 창 외부를 클릭하거나 닫기 버튼을 누를 때까지 부모 창과 상호 작용할 수 없습니다. 모달은 사용자의 주의를 특정 작업이나 정보에 집중시키고, 부모 창의 작업을 일시적으로 중단시키는 데 사용됩니다.

 

<button onclick="openModal()">Open Modal</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">×</span>
    <p>This is a modal window.</p>
  </div>
</div>

<script>
  function openModal() {
  document.getElementById('myModal').style.display = 'block';
  }

  function closeModal() {
  document.getElementById('myModal').style.display = 'none';
  }
</script>

 

모달 창은 사용자가 부모 창의 작업을 일시적으로 중단하고 모달 창에 집중하도록 하는 창입니다.

- 주로 중요한 정보나 작업을 수행하기 위해 사용됩니다.
- 모달이 열린 경우 부모 창은 잠시 동안 사용자 입력을 받지 않습니다.
- 모달 창이 닫힌 후에야 부모 창에 다시 입력이 가능합니다.

모달과 비슷한 것으로는 팝업 창 (Popup Window)이 있습니다.

팝업 창은 현재 창을 잠시 떠나 새로운 작은 창을 열어 사용자에게 정보를 표시하는 창을 말합니다. 일반적으로 새로운 브라우저 창이나 탭에 열립니다.
새로 열린 창은 부모 창과는 독립적이며, 사용자가 부모 창과 팝업 창을 동시에 볼 수 있습니다. 주로 광고, 알림, 작은 폼 등을 표시하는 데 사용됩니다.

 

<button onclick="openPopup()">Open Popup</button>

<script>
function openPopup() {
window.open('popup.html', 'Popup', 'width=400,height=300');
}
</script>

 

팝업 창과 모달 창은 사용자와의 상호 작용 방식이나 디자인에 따라 다양하게 구현될 수 있습니다. 팝업 창은 주로 새로운 브라우저 창이나 탭으로 열리고, 모달 창은 현재 창 위에 떠다니며 사용자의 주의를 요구하는 형태로 사용됩니다.

 

 

2. 모달 Modak 예제 소개

 

JavaScript의 모든 문법 및 구문을 다 알고 난 후에 코드를 만들어 보는 것이 좋은 방법일 수 있겠지만, 처음 시작하는 사람이 프로그래밍 언어를 바로 이해한다는 것은 쉽지 않을 일입니다. 특히 저의 경우에는 너무 어려운 작업이었습니다.

" 바퀴는 가져다가 잘 사용하면 됩니다. 굳이 바퀴를 새롭게 발명할 필요는 없습니다. 좀 더 좋은 바퀴로 업그레이드 해서 사용하면 됩니다.
코드도 마찬가지 입니다. 이미 만들어진 코드를 새로 작성하기 보다는 코드를 업그레이드 해서 사용하는 것이 훨씬 효율적입니다." 라는 내용의 코딩관련 동영상을 본 적이 있습니다.

모달 관련 예제는 W3 School에서 가져왔습니다.

 

https://www.w3schools.com/howto/howto_css_modal_images.asp

 

How To Create Modal Images

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

W3School은 이러한 바퀴들이 많이 있는 창고 입니다. 여기에 있는 코드들을 자신의 코드에 잘 가져다가 활용할 수 있다면 자신만의 훌륭한 웹페이지를 만들 수 있습니다.

예제를 통하여 HTML-CSS-JavaScript가 어떻게 연결되어 작동하는 지에 대해 알아보겠습니다. 더불어 각 코드에 대하여 구문 및 문법에 대해 알아보고자 합니다.

저의 경우에는 코드는 찾아서 가져왔지만, 코드에 적용시키고 업그레이드 할 때 에러가 발생하여 잘 작동하지 않은 경우가 있었습니다. 문제는 어느 부분을 수정해야 하는 지 망막하였는데, 결국 각 코드별 어떻게 연결했는 지를 찾고 나서야 해결할 수 있었습니다.

아래 코드를 HTML,CSS,JavaScript로 나누어서 알아보겠습니다.

 

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal
when it is clicked on. Also note that we use the value from the image's "alt" attribute as
an image caption text inside the modal.</p>

<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
</script>

</body>
</html>

 

'웹(Web) 이야기' 카테고리의 다른 글

26. <CSS> display 속성 : 모달(Modal)  (0) 2024.03.13
25. <HTML> 특수문자 - 엔티티코드  (0) 2024.03.09
23. <JavaScript> 제어할 태그  (0) 2024.03.04
22. <HTML> Input 태그와 <JavaScript> 이벤트  (1) 2024.03.01
21. <JavaScript> HTML과 연결하기  (0) 2024.02.29
'웹(Web) 이야기' Related Articles more