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>
Một số trường hợp bạn muốn dùng thẻ <a href="" thay cho <button thì có thể đổi lại bình thường nhé.
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 tại đây
Ư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.
Nếu bạn thấy bài viết có ích hãy sao chép link và chia sẻ bài viết
Bài viết liên quan
