Hôm nay, mình sẽ hướng dẫn 1 cách đơn giản để tạo 1 pop-up thông báo!
Khi thông báo xuất hiện, thì background sẽ dim lại như các bạn thường thấy ở 1 số website.
Về cơ bản cách làm như sau, mình sẽ tạo 1 div.dim dùng để bao phủ 1 màn đen với độ trong suốt khoảng 0.7, và 1 div.pop-up được căn giữa màn hình và cả 2 div này mặc định sẽ ẩn và chỉ xuất hiện khi người dùng click vào 1 object nào đó và được bắt sự kiện bằng Jquery.
Code HTML của 2 div này như sau:
<!-- Background --> <div class="content"> Quy Nguyen's Blog <input id="showBox" type="button" value="Show box" /> </div> <!-- Pop-up --> <div class="dim"></div> <div class="box"> <div class="close">X</div> This is a box! </div>
Style cho nó bằng CSS:
.dim {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.7;
display: none;
z-index: 10000;
}
.box {
background-color: #fff;
width: 300px;
height: 150px;
border: 1px solid #333;
position: absolute;
display: none;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
z-index: 10001;
}
.close {
position: absolute;
border: 1px solid #333;
top: 0;
right: 0;
display: inline;
cursor: pointer;
}
Các bạn chịu khó đọc từng dòng code css trên thì sẽ hiểu được rất rõ ràng 🙂
Tiếp theo là bắt sự kiện click cho 1 button sẽ xuất hiện 2 div kia. Các bạn nhớ add source Jquery vào thẻ head nhé.
<script>
$(document).ready(function(){
var object = $('.dim,.box');
$('#showBox').click(function(){
object.show();
});
$('.dim,.close').click(function(){
object.hide();
})
})
</script>
Thế là xong! Các bạn có thể thêm thắt cho pop-up đẹp hơn 1 tý, nó có thể dùng để làm form đăng nhập, thông báo 1 sự kiện sắp hoặc đang diễn ra,v..v…
Các bạn có thể tải source ở đây nhé!
http://www.mediafire.com/?ydvzacx89vnesfy
