jquery - 4 kiểu Hiển thị một popup

 Đây là code hiển thị một popup lên màn hình khi bạn click vào một liên kết. Tôi tìm thấy code này tại một site blogger Ấn Độ. Tại Việt Nam, một số blogger nổi tiếng cũng đã giới thiệu lại thủ thuật này, tuy nhiên nội dung js bỏ vào link js, css lại rồi thêm nội dung khác vào popup. Do đó mọi người có thể khó xác định nguồn và sử dụng nó hơi thụ động nếu không quen code.

Bài này tôi giới thiệu code cơ bản để các bạn nhanh hiểu, dễ tùy biến, tường minh về các phong cách. Cùng một thủ thuật này, có 2 kiểu hiệu ứng.
1. Để tắt khối popup thì phải click close.
2. Để tắt khối popup thì chỉ cần click vào màn hình hoặc click close cũng được

Hiệu ứng jquery hiện popup và tắt khi click vào nút close (cần nút tắt)

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//open popup
$("#pop").click(function(){
  $("#overlay_form").fadeIn(1000);
  positionPopup();
});
//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(){
  if(!$("#overlay_form").is(':visible')){
    return;
  }
  $("#overlay_form").css({
      left: ($(window).width() - $('#overlay_form').width()) / 2,
      top: ($(window).width() - $('#overlay_form').width()) / 7,
      position:'absolute'
  });
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
</style>
<a href="#" id="pop" >PopUp</a>
<br />
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>

Hiệu ứng jquery hiện popup và tắt popup bằng cách click lên vị trí bất kỳ bên ngoài (có thể không cần nút close)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//open popup
$("#pop").click(function(){
  $("#overlay_form").fadeIn(1000);
  $(".background_overlay").fadeIn(500);
  positionPopup();
});
//close popup
$("#close, .background_overlay").click(function(){
$("#overlay_form").fadeOut(500);
$(".background_overlay").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(){
  if(!$("#overlay_form").is(':visible')){
    return;
  }
  $("#overlay_form").css({
      left: ($(window).width() - $('#overlay_form').width()) / 2,
      top: ($(window).width() - $('#overlay_form').width()) / 7,
      position:'absolute'
  });
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
<style>
#overlay_form{
position: absolute;
border: 5px solid #8DC748;
padding: 10px;
background: white;
width: 270px;
height: 190px;
z-index: 200;
}
.background_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; background:black; opacity: 0.5;}
</style>
<a href="#" id="pop" >PopUp</a>
<br />
<div class="background_overlay" style="display:none"></div>
<div id="overlay_form" style="display:none">
Nội dung ...
<a href="#" id="close" >Close</a>
</div>

Ở hai kiểu hiệu ứng trên, để hiện popup đều phải click lên một siêu liên kết. Nếu bạn muốn nó tự động xuất hiện popup khi load xong trang thì sửa lại phần js ở trên như sau:

Tức là loại bỏ dòng số 9 và dòng thứ 12 như hình trên
Ta có thể áp dụng cho 2 hiệu ứng trên. Tức là chúng ta sẽ có thêm 2 hiệu ứng nữa là:
3. Tự động hiện pupup, tắt popup bằng cách click vào nút close.
4. Tự động hiện popup, tắt popup bằng cách click bất kỳ bên ngoài popup (ko cần nút close)

Tham khảo

www.theonlytutorials.com/demo/typewriter/