[javascript] jQuery를 사용하여 팝업창 및 모달 창 만들기
jQuery는 HTML, CSS 및 JavaScript를 조작하는 강력한 라이브러리입니다. 이 글에서는 jQuery를 사용하여 팝업창과 모달 창을 만드는 방법에 대해 안내하겠습니다.
팝업창 만들기
팝업창은 사용자에게 알림이나 추가 정보를 제공하는 데 사용됩니다. jQuery를 사용하여 간단한 팝업창을 만드는 방법을 살펴보겠습니다.
// HTML
<button id="popupButton">팝업 열기</button>
<div id="popup" style="display: none;">
<h2>알림</h2>
<p>이것은 팝업 메시지입니다.</p>
<button id="closeButton">닫기</button>
</div>
// JavaScript
$(document).ready(function() {
$("#popupButton").click(function() {
$("#popup").show();
});
$("#closeButton").click(function() {
$("#popup").hide();
});
});
팝업창의 내용은 popup이라는 id를 가진 div 요소로 구성됩니다. 팝업 열기 버튼을 클릭하면 팝업창이 나타나고, 닫기 버튼을 클릭하면 팝업창이 숨겨지게 됩니다.
모달 창 만들기
모달 창은 사용자의 입력을 기다리는 데 사용되며, 일반적으로 중요한 작업이나 알림을 위해 사용됩니다. 다음은 jQuery를 사용하여 모달 창을 만드는 방법입니다.
// HTML
<button id="modalButton">모달 열기</button>
<div id="modal" style="display: none;">
<h2>입력 창</h2>
<input type="text" id="inputField">
<button id="submitButton">제출</button>
<button id="cancelButton">취소</button>
</div>
// JavaScript
$(document).ready(function() {
$("#modalButton").click(function() {
$("#modal").show();
});
$("#submitButton").click(function() {
var userInput = $("#inputField").val();
// 입력된 내용을 처리하는 로직 추가
$("#modal").hide();
});
$("#cancelButton").click(function() {
$("#modal").hide();
});
});
모달 창 열기 버튼을 클릭하면 모달 창이 나타나고, 사용자가 입력을 완료하고 제출 버튼을 클릭하면 입력된 내용을 처리하고 모달 창이 숨겨집니다. 취소 버튼을 클릭하면 모달 창이 닫힙니다.
결론
jQuery를 사용하여 팝업창과 모달 창을 만드는 방법에 대해 알아보았습니다. 이러한 기능은 사용자와의 상호작용을 쉽게 구현할 수 있도록 도와줍니다. 추가로 jQuery UI나 다른 라이브러리를 활용하면 더 다양한 스타일과 기능을 가진 팝업창 또는 모달 창을 만들 수 있습니다.