Tạo Popup Modal sử dụng jQuery

Posted on by mtoplistChuyên mục:Top List

Các bước để tạo một Popup Modal bằng cách sử dụng jQuery

Để tạo một chế độ popup, chúng ta cần phải làm theo các bước dưới đây.

  1. Tạo file index.html
  2. Viết CSS
  3. Viết jQuery
1. Tạo file index.html

Trước tiên, chúng ta cần tạo tệp index.html và dán code HTML dưới đây vào.

<a class="open-button" popup-open="popup-1" href="javascript:void(0)">
Click để mở popup 1</a>
 
<div class="popup" popup-name="popup-1">
    <div class="popup-content">
    <h2>Tiêu đề popup</h2>
<p>Sharescript.net là một trang web chia sẻ mã nguồn, script, template, và thủ thuật xoay quanh chủ đề website. Hy vọng bạn sẽ yêu thích nó!</p>
<a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
    </div>
</div>
2. Viết CSS

Bây giờ chúng ta cần phải làm đẹp popup, dán các style sau vào file CSS hoặc ngay trong phần head trong file index.html.

body {
    font-family:Arial, Helvetica, sans-serif;
}
p {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.5px;
    color: #484848;
}
/* Button mở popup */	
.open-button{
    color:#FFF;
    background:#0066CC;
    padding:10px;
    text-decoration:none;
    border:1px solid #0157ad;
    border-radius:3px;
}
.open-button:hover{
    background:#01478e;
}
 
.popup {
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
    width:100%;
    height:100%;
    display:none;
}
/* Nội dung popup */
.popup-content {
    width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 40px;
    margin-top: 100px;
    box-shadow: 0px 2px 6px rgba(0,0,0,1);
    border-radius: 3px;
    background: #fff;
    position: relative;
}
/* Button đóng popup */
.close-button {
    width: 25px;
    height: 25px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 20px;
    background: rgba(0,0,0,0.8);
    font-size: 20px;
    text-align: center;
    color: #fff;
    text-decoration:none;
}
.close-button:hover {
    background: rgba(0,0,0,1);
}
 
@media screen and (max-width: 720px) {
.popup-content {
    width:90%;
    }	
}
3. Viết jQuery

Bây giờ đến phần quan trọng nhất, tôi sẽ sử dụng jQuery để popup hoạt động khi người dùng nhấp vào nút bật popup hoặc nút đóng popup.

<script>
$(function() {
    // Mở popup
    $('[popup-open]').on('click', function() {
        var popup_name = $(this).attr('popup-open');
  $('[popup-name="' + popup_name + '"]').fadeIn(300);
    });
 
    // Đóng popup
    $('[popup-close]').on('click', function() {
  var popup_name = $(this).attr('popup-close');
  $('[popup-name="' + popup_name + '"]').fadeOut(300);
    });
  
    // Đóng popup khi click ra ngoài
    $('.popup').on('click', function() {
  var popup_name = $(this).find('[popup-close]').attr('popup-close');
  $('[popup-name="' + popup_name + '"]').fadeOut(300);
    }).children().click(function() {
  return false;
    });
  
});
</script>

Vậy là tôi đã hướng dẫn xong cách để tạo một Popup Modal sử dụng jQuery. Nếu bạn thấy hữu ích hãy chia sẻ nó cho mọi người!

mtoplist