10/10/2018, 00:22

ai biết cách làm thẻ <div> nằm lên trên tất cả đối tượng ko

anh em nào biết cách khi nhấp vào nút lệnh thì sẽ có 1 thẻ <div> chèn lên trên tất cả đối tượng và ko cho thao tác gì với nội dung của trang web cả giống như hiệu ứng fade vậy đó.
sacroyant viết 02:32 ngày 10/10/2018
Bạn xem trang này http://linhlan.justfree.com/

Tất cả nằm dưới 1 thẻ div, ngoại trừ thanh toolbars dưới đáy trang mà khi di chuột lên mới thấy. Vì có thẻ div ấy che chở nên bạn không thể nhấp phải trên nền trang để view source, copy image location...
BossFTP viết 02:26 ngày 10/10/2018
http://oxyz.info/z-index (w3schools)
trouble_maker viết 02:24 ngày 10/10/2018
cho z-index của nó lên 1000 xem có đè lên hết ko
kiem_bo viết 02:38 ngày 10/10/2018
tôi có làm như vậy nhưng ko được
Anh em xem thử
<html>
<head><title></title></head>
<script language="javascript">
function xem()
{

document.getElementById("fade").style.display='blo ck';
}
</script>
<body>
<div id="fade" style="z-index:1000; width:100%; height:100%; background-color:#99FF00; display:none"></div>
<p>aa</p>
<p>à</p>
<p>à</p>
<p>a</p>
<p>fa</p>
<p>f</p>
<p>à</p>
<p>à</p>
<p>fa</p>
<p>fa</p>
<p>&nbsp;</p>
<a href="#" onClick="xem();">Demo</a>
</body>
</html>
sacroyant viết 02:30 ngày 10/10/2018
z-index chỉ có tác dụng nếu position là absolute hoặc relative.
kiem_bo viết 02:36 ngày 10/10/2018
được rồi nhưng bây giờ tôi lại gặp vấn đề nếu nội dung trang web chiều cao dài nhưng nó chỉ hiện đầy màn hình nhưng khi kéo thanh cuộn xuống thì vẫn ko thấy che lấp hết được
sacroyant viết 02:32 ngày 10/10/2018
Trong một trang có hiệu ứng như thế, bạn không nên dùng thanh cuộn mặc định của trang (tức là của phần tử BODY) mà tạo ra 2 lớp khác nhau, với 2 thẻ DIV.

Phần tử DIV đầu tiên đóng vai trò lớp kính che toàn bộ nội dung. Nó được thiết lập kích thước 100% x 100%, có z-index vượt lên trên cùng, nhưng ẩn đi.

Phần tử DIV thứ 2 chứa tất cả nội dung của trang cần hiển thị, cũng có kích thước 100% x 100%, nhưng nằm phía sau. Thanh cuộn của trang web chính là thanh cuộn của phần tử DIV này. Khi lớp kính xuất hiện, người dùng sẽ không sử dụng được thanh scrollbar.
kiem_bo viết 02:25 ngày 10/10/2018
uh được rồi. Cảm ơn anh em nha
Nhưng mà cái này nó chỉ chạy trên IE còn trên FF vẫn bị lỗi như vậy
sacroyant viết 02:26 ngày 10/10/2018
Lạ, FF mới là trình duyệt hỗ trợ tốt nhất cho hiệu ứng này. Bạn nên viết mã chuẩn trên FF trước, rồi sau mới test lại trên IE và những thứ khác.
Bài liên quan
0