Tạo cửa sổ popup đơn giản: jQuery

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Tommy Tran
Tue, 18/12/2012, 16:06 (GMT+7)
0 Bình luận

Tạo cửa sổ popup đơn giản: jQuery

Cửa sổ popup được tạo ra bao gồm thành phần chính là hai thẻ <div>. Một thẻ được dùng làm nền với màu xám đục và thẻ còn lại dùng để hiển thị nội dung của popup. Kết hợp với các hiệu ứng chuyển động mà jQuery hỗ trợ, bạn có thể tạo được một popup khá hoàn chỉnh.

Tạo một trang HTML với nội dung của thẻ <body> như sau:

<button id="button1">Open Popup</button>

<!-- POPUP CONTENT -->

<div id="popup1" class="popup" style="width:300px;height:200px;">

<div style="background:lavender;">Title<a href="#" class="close"/>x</a></div>

<div align="center" style="margin-top:20px">

Your content here.<br/>

    <img src="Face_Yahoo.png"/>

</div>

<!-- END POPUP CONTENT -->

</div>

<div id="background"></div>

Trong đó:

- button1: hiển thị popup khi được click.

- popup1: cửa sổ popup, bao gồm một thanh tiêu đề và phần nội dung.

- background: nền của popup. Thẻ này sẽ được resize để phủ toàn nội dung trang web. Khi sử dụng nhiều popup, bạn cũng chỉ cần duy nhất một background.

Việc hiển thị cửa sổ popup rất đơn giản. Đầu tiên ta sẽ lấy kích thước của vùng hiển thị trang web trên trình duyệt. Sau đó thay đổi kích thước của background để lấp đầy màn hình và cho hiện lên. Sau đó căn vị trí cho thẻ popup1 nằm giữa màn hình và hiển thị lên.

function openPopup(){

    var dheight = document.body.clientHeight;

    var dwidth = document.body.clientWidth;

    $("#background").width(dwidth).height(dheight);

    $("#background").fadeTo("slow",0.8);

    var $popup1=$("#popup1");

    $popup1.css("top", (dheight-$popup1.height())/2);

    $popup1.css("left",(dwidth-$popup1.width())/2);

    $popup1.fadeIn();
}

Minh họa:

Mã nguồn hoàn chỉnh:

<html>

<head>

<title>Simple jQuery Popup</title>

<style>

.popup{

    position: absolute;

    background: white;

    border: 1px solid gray;

    z-index: 10000;

    box-shadow: 3px 3px gray;

}

#background{

    position: absolute;

    background: gray;

    left: 0px;

    top: 0px;

}

a.close{

    text-decoration: none;

    float: right;

}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {

    $(".popup").hide();

    $("#button1").click(function(e) {

        openPopup();

    });

    $(".close").click(function (e) {

        closePopup();

        e.preventDefault();

    });

    $("#background").click(function () {

        closePopup();

    });

});

function openPopup(){

    var dheight = document.body.clientHeight;

    var dwidth = document.body.clientWidth;

    $("#background").width(dwidth).height(dheight);

    $("#background").fadeTo("slow",0.8);

    var $popup1=$("#popup1");

    $popup1.css("top", (dheight-$popup1.height())/2);

    $popup1.css("left",(dwidth-$popup1.width())/2);

    $popup1.fadeIn();

}

function closePopup(){

    $("#background").fadeOut();

    $(".popup").hide();

}

</script>

</head>

<body>

<button id="button1">Open Popup</button>


<!-- POPUP CONTENT -->

<div id="popup1" class="popup" style="width:300px;height:200px;">

<div style="background:lavender;">Title<a href="#" class="close"/>x</a></div>

<div align="center" style="margin-top:20px">

Your content here.<br/>

    <img src="Face_Yahoo.png"/>

</div>

<!-- END POPUP CONTENT -->

</div>


<div id="background"></div>


</body>

</html>

YinYang’s Programming Blog

Bạn thấy bài viết này như thế nào?:

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies