Tạo popup div bằng jquery

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

Div popup là một hiệu ứng rất phổ biến cho các trang web, chúng ta có thể áp dụng hiệu ứng này rất dễ dàng, chúng ta có thể tìm kiếm và tải về, hoặc sử dụng plugin jQuery bên thứ ba. Trong bài viết này tôi muốn chia sẻ, làm thế nào để tạo ra một cửa sổ popup div sử dụng thư viện jQuery phổ biến.

Và bây giờ chúng ta hãy bắt đầu.

1. Tạo một Page Template (index.html)





Tạo Popup Div bằng Jquery


Trong file index.html, chúng tôi chèn vào file css, jQuery and js script sau mỗi tag. Trong phần body, chúng tôi có 3 div containers cho sự kiện popup div. 
– div container dành cho loading 
– div container cho popup background
– Và div container cho hành động popup

2. Viết CSS cho popup (style.css)

#backgroundPopup {
    z-index:1;
    position: fixed;
    display:none;
    height:100%;
    width:100%;
    background:#000000;
    top:0px;
    left:0px;
}
#toPopup {
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 10px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    display: none;
    font-size: 14px;
    left: 50%;
    margin-left: -402px;
    position: fixed;
    top: 20%;
    width: 800px;
    z-index: 2;
}
div.loader {
    background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
    height: 32px;
    width: 32px;
    display: none;
    z-index: 9999;
    top: 40%;
    left: 50%;
    position: absolute;
    margin-left: -10px;
}
div.close {
    background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 30px;
    position: absolute;
    right: -27px;
    top: -24px;
    width: 30px;
}
span.ecs_tooltip {
    background: none repeat scroll 0 0 #000000;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    display: none;
    font-size: 11px;
    height: 16px;
    opacity: 0.7;
    padding: 4px 3px 2px 5px;
    position: absolute;
    right: -62px;
    text-align: center;
    top: -51px;
    width: 93px;
}
span.arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #000000;
    display: block;
    height: 1px;
    left: 40px;
    position: relative;
    top: 3px;
    width: 1px;
}
div#popup_content {
    margin: 4px 7px;
    /* remove this comment if you want scroll bar
    overflow-y:scroll;
    height:200px
    */
}

Trong mã css này, nếu bạn muốn scrollbar trong popup, bạn hãy xóa line 74.

3. Nội dung file jQuery (script.js)

jQuery(function($) {

 $("a.topopup").click(function() {
   loading(); // loading
   setTimeout(function(){ // then show popup, deley in .5 second
    loadPopup(); // function show popup
   }, 500); // .5 second
 return false;
 });

 /* event for close the popup */
 $("div.close").hover(
     function() {
      $('span.ecs_tooltip').show();
     },
     function () {
         $('span.ecs_tooltip').hide();
       }
    );

 $("div.close").click(function() {
  disablePopup();  // function close pop up
 });

 $(this).keyup(function(event) {
  if (event.which == 27) { // 27 is 'Ecs' in the keyboard
   disablePopup();  // function close pop up
  }
 });

        $("div#backgroundPopup").click(function() {
  disablePopup();  // function close pop up
 });

 $('a.livebox').click(function() {
  alert('Hello World!');
 return false;
 });

  /************** start: functions. **************/
 function loading() {
  $("div.loader").show();
 }
 function closeloading() {
  $("div.loader").fadeOut('normal');
 }

 var popupStatus = 0; // set value

 function loadPopup() {
  if(popupStatus == 0) { // if value is 0, show popup
   closeloading(); // fadeout loading
   $("#toPopup").fadeIn(0500); // fadein popup div
   $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
   $("#backgroundPopup").fadeIn(0001);
   popupStatus = 1; // and set value to 1
  }
 }

 function disablePopup() {
  if(popupStatus == 1) { // if value is 1, close popup
   $("#toPopup").fadeOut("normal");
   $("#backgroundPopup").fadeOut("normal");
   popupStatus = 0;  // and set value to 0
  }
 }
 /************** end: functions. **************/
}); // jQuery End

4. Kết Luận

Kết thúc bài viết này, chúng tôi đã tạo ra popup div sử dụng jQuery. 

– Chúng tôi tạo ra popup div không sử dụng plugin của bên thứ 3.
– Chúng tôi thêm một vài đặc tính khác như: hover tool tip and keyboard event

Nếu bạn thấy bài viết này hữu ích hãy “Like hoặc G+” và chia sẽ cho bạn bè. Cảm ơn các bạn. Chúc các bạn thành công!

Chia sẻ:

Thích bài này:

Thích

Đang tải…

mtoplist