Bài viết hôm nay mình sẽ hướng dẫn các bạn tạo popup cảnh báo hiện text khi người dùng click chuột phải trên trang. Thủ thuật này được tùy biến lại từ bài viết: Thủ thuật chống Copy bằng Menu chuột phải tuyệt đẹp cho Blogspot.
Thủ thuật khá hay, chống được chuột phải lại còn hiện popup cảnh báo người ta! Để hình dung rõ hơn thì bạn thử click chuột phải trên bất kì vị trí nào ở trang này để xem Demo nhé!
Các bước thực hiện
Bước 1. Chèn CSS (trước]]></b:skin>
)ul.contextMenu{background:#fff;text-align:center;margin:0;padding:10px 20px;border-radius:100px;color:#ff6460;box-shadow:0 0 70px rgba(0,0,0,.25);font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:24px;z-index:999999;position:fixed;top:50%!important;left:50%!important;transform:translate(-50%,-50%);pointer-events:none}Bước 2. Chèn HTML và Javascript (sau
<body
)<ul class='contextMenu' hidden='1'>NO! STOP!</ul>Thay dòng chữ đỏ cho phù hợp theo ý bạn nhé!
<script type='text/javascript'>
// Right click show Popup by bacsiwindows.com
$(document).bind("contextmenu", function(event) {
event.preventDefault();
$("ul.contextMenu")
.show();
});
$(document).click(function() {
isHovered = $("ul.contextMenu").is(":hover");
if (isHovered == false){
$("ul.contextMenu").fadeOut(100);
}
});
</script>
Bước 3. Lưu mẫu
Chúc thành công!
👌
ReplyDelete