Hướng dẫn tạo Popup Modal sử dụng jQuery

Đây là đoạn code Popup Modal với jQuery đơn giản nhưng hiệu quả mình mình thường sử dụng ở nhiều dự án, đoạn code này với 1 button đặt ở mọi ví trên trang, khi khách click vào button sẽ hiện lên thông báo hay bất cứ form liên hệ nào bạn muốn đặt.

Bạn có thể sử dụng code đơn giản này kết hợp với PHP trong WordPress sẽ rất hữu ích.

Popup Modal với jQuery gồm 3 phần (tất nhiên rồi) là HTML, CSS và Jquery

<button class="modal-link" data-modal="test">Click me</button>
<div class="modal-overlay" data-modal="test">
  <div class="modal-table">
    <div class="modal-table-cell">
      <div class="modal">
        <button class="modal__close"></button>
        <div class="modal__header">POPUP MODAL with JQUERY</div>
        <div class="modal__content">
          <!-- Content-->
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien orci, dignissim vel orci sed, ornare tristique erat. Quisque dictum sagittis ipsum ac porttitor. Morbi condimentum feugiat feugiat. Sed commodo vel nunc eget imperdiet. Fusce posuere accumsan ipsum sed finibus. Fusce nibh lacus, varius non lacinia id, sodales eu justo. In commodo lorem nec purus hendrerit, sed semper libero mollis.</p>
          <p>Integer accumsan ante non massa feugiat, quis congue odio luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo tortor cursus, imperdiet libero ac, efficitur lectus. Curabitur volutpat, lacus quis porttitor pretium, purus magna pulvinar odio, a posuere mauris tellus non erat. Phasellus in tincidunt est, in pulvinar mauris. Aenean aliquam malesuada leo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Code CSS

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  overflow: auto;
  z-index: 999;
  transition: 0.4s all;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.modal-overlay *,
.modal-overlay *:before,
.modal-overlay *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.modal-overlay_visible {
  opacity: 1;
  visibility: visible;
}

.modal-table {
  display: table;
  width: 100%;
  height: 100%;
}

.modal-table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0 15px;
}

.modal {
  transition: 0.4s all;
  display: inline-block;
  padding: 35px 45px 20px 30px;
  max-width: 400px;
  width: 100%;
  background: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
  color: #333;
  text-align: left;
  font-family: Arial;
  margin: 30px 0;
  transform: translate(0, 20%);
  position: relative;
  border-radius: 4px 6px 4px 4px;
  cursor: auto;
  font-size: 16px;
}

.modal-overlay_visible .modal {
  transform: translate(0);
}

.modal__header {
  font-size: 22px;
  font-weight: 400;
  padding: 0 0 30px 0;
}

.modal__content p {
  padding: 0 0 10px 0;
  margin: 0;
}

.modal__close {
  position: absolute;
  right: 10px;
  top: 0;
  background: #da4d43;
  width: 25px;
  height: 25px;
  border-radius: 0 0 4px 4px;
  transition: 0.4s all;
  padding: 0;
  border: none;
  cursor: pointer;
}

.modal__close:hover {
  background: #ed5f55;
}

.modal__close:before,
.modal__close:after {
  content: "";
  display: block;
  height: 16px;
  width: 1px;
  transform: rotate(45deg);
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}

.modal__close:after {
  transform: rotate(-45deg);
}

Code Jquery

$(document).ready(function () {

  $(".modal-link").on("click", function () {
    $('.modal-overlay[data-modal="' + $(this).data("modal") + '"]').addClass(
      "modal-overlay_visible"
    );
  });

  // Function to close a modal window by clicking on a button

  $(".modal__close").on("click", function () {
    $(".modal-overlay").removeClass("modal-overlay_visible");
  });

// Function to close the modal window by clicking outside the window

  $(document).on("click", function (e) {
    if ($(".modal-overlay_visible").length) {
    // If there is an open window

      if (
        !$(e.target).closest(".modal").length &&
        !$(e.target).closest(".modal-link").length
      ) {
        
      // If clicked outside its content and not on the call link

        $(".modal-overlay").removeClass("modal-overlay_visible");
      }
    }
  });
});

Demo Popup Modal với jQuery bạn có thể xem trực tiếp

Ưu điểm của đoạn code trên là khi click popup show ra bạn click bất cứ vị trí nào ngoài popup sẽ tắt được popup hoặc click vào nút tắt chéo cũng được.

Code đơn giản như vậy thôi, bạn có thể style lại button cho đẹp hơn nhé.

Hy vọng code sẽ giúp ích được cho nhiều người.

Từ khóa

Tiến Dũng Đào là chuyên gia quản lý, vận hành các dịch vụ website. Anh có nhiều năm kinh nghiệm về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu thích WordPress với hơn 5 năm phát triển theme và plugin.Sở thích của anh là đọc, viết blog, đi du lịch, tập võ và chia sẻ các kiến thức cho mọi người.

Bài viết liên quan