[javascript] jQuery를 사용한 툴팁, 드롭다운 메뉴, 모달 창 구현 방법

01 Dec 2023

javascript

HTML, CSS, JavaScript의 조합으로 다양한 웹 요소와 인터랙션을 구현할 수 있습니다. 이번 포스트에서는 jQuery를 사용하여 툴팁, 드롭다운 메뉴, 모달 창을 간단하게 구현하는 방법을 소개하겠습니다.

1. 툴팁 구현하기

툴팁은 특정 요소에 마우스를 올렸을 때 정보나 설명을 보여주는 기능을 가지고 있습니다.

HTML:

<button class="tooltip-btn" title="Tooltip example">Hover me</button>
<div class="tooltip">Tooltip example</div>

CSS:

.tooltip {
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  font-size: 14px;
}

.tooltip-btn:hover + .tooltip {
  display: block;
}

JavaScript(jQuery):

$(document).ready(function() {
  $('.tooltip-btn').hover(function() {
    var tooltipText = $(this).attr('title');
    $(this).removeAttr('title');
    $(this).next('.tooltip').text(tooltipText);
  }, function() {
    var tooltipText = $(this).next('.tooltip').text();
    $(this).attr('title', tooltipText);
    $(this).next('.tooltip').text('');
  });
});

2. 드롭다운 메뉴 구현하기

드롭다운 메뉴는 마우스 클릭이나 호버로 메뉴를 열고 닫을 수 있는 기능을 가지고 있습니다.

HTML:

<div class="dropdown">
  <button class="dropdown-btn">Dropdown</button>
  <ul class="dropdown-menu">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>

CSS:

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

JavaScript(jQuery):

$(document).ready(function() {
  $('.dropdown').hover(function() {
    $(this).find('.dropdown-menu').show();
  }, function() {
    $(this).find('.dropdown-menu').hide();
  });
});

3. 모달 창 구현하기

모달 창은 사용자에게 중요한 정보를 보여주거나 추가적인 작업을 요구하는 창입니다. 사용자의 동작에 따라 모달 창을 열고 닫을 수 있습니다.

HTML:

<button class="modal-btn">Open Modal</button>
<div class="modal">
  <div class="modal-content">
    <span class="modal-close">&times;</span>
    <h2>Modal Title</h2>
    <p>Modal content goes here...</p>
  </div>
</div>

CSS:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: absolute;
  background-color: #fff;
  padding: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer;
}

.modal-btn:hover + .modal {
  display: block;
}

JavaScript(jQuery):

$(document).ready(function() {
  $('.modal-btn').click(function() {
    $('.modal').show();
  });

  $('.modal-close').click(function() {
    $('.modal').hide();
  });
});

위의 코드를 참고하여 툴팁, 드롭다운 메뉴, 모달 창을 간단하게 구현할 수 있습니다. 이러한 기능을 사용하면 웹 사이트나 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

참고 자료:

툴팁 구현: https://www.w3schools.com/howto/howto_css_tooltip.asp
드롭다운 메뉴 구현: https://www.w3schools.com/howto/howto_css_dropdown.asp
모달 창 구현: https://www.w3schools.com/howto/howto_css_modals.asp