Cách Tạo Chèn Code Popup Thông Báo Giữa Màn Hình Website

Hướng dẫn cách tạo chèn code popup thông báo giữa màn hình Website khi truy cập, Vào những ngày nghỉ, ngày lễ tết thường các công ty, doanh nghiệp đều có lịch nghỉ làm, Việc có một thông báo trên website là điều cần thiết để cán bộ, công nhân viên và khách hàng nắm được thông tin hoạt động, Bởi vậy hôm nay Phan Việt xin chia sẻ cách chèn đoạn mã nhanh đơn giản, nhanh nhất giúp các bạn tạo khung anh Popup ở giữa hoặc góc màn hình trước khi xem nội dung trên web.

Trước tiên bạn Copy đoạn mã dưới đây chèn vào trang web mà bạn muốn hiển thị, bạn có thể chèn vào trong thẻ header, body hay foooter đều được.

<!– Đoạn JS –>

<script src=”https://code.jquery.com/jquery-1.11.0.min.js”></script>

<style type="text/css"> #popup-giua-man-hinh .headerContainer,#popup-giua-man-hinh .bodyContainer,#popup-giua-man-hinh .footerContainer{max-width:960px;margin:0 auto;background:#FFF} #popup-giua-man-hinh .padding{padding:20px} #popup-giua-man-hinh .bodyContainer{min-height:500px} #popup-giua-man-hinh .popUpBannerBox{position:fixed;background:rgba(0,0,0,0.9);width:100%;height:100%;top:0;left:0;color:#FFF;z-index:999999;display:none} #popup-giua-man-hinh .popUpBannerInner{max-width:650px;margin:0 auto} <!-- Ở trên max-width:650px vì ảnh hiển thị có kích thước chiều ngang là 650px, khi đó ảnh sẽ hiện thị đúng ở giữa web, nếu kích thước chiều ngang không đúng 650px ảnh hiển thị sẽ không nằm ở giữa mà sẽ lệch sang trái hoặc phải hoặc tên, dưới, Để ảnh hiện chính giữa thì ảnh của bạn có kích thước chiều ngang bao nhiêu thì bạn để max-width đúng bằng kích thước ảnh nhé --> #popup-giua-man-hinh .popUpBannerContent{position:fixed;top:150px} #popup-giua-man-hinh .closeButton{color:red;text-decoration:none;font-size:18px} #popup-giua-man-hinh a.closeButton{float:right} </style> <div id="popup-giua-man-hinh"> <div class="popUpBannerBox"> <div class="popUpBannerInner"> <div class="popUpBannerContent"> <p><a href="#" class="closeButton">Close</a></p> <!-- ========= CODE HIỂN THỊ ẢNH THÔNG BÁO ============--> <a href="https://phanthanhviet.com/"><img src="https://luatminhanh.vn/wp-content/uploads/2022/01/Lich-nghi-tet-cong-ty-Luat-Minh-Anh-2022.jpg"/></a> <!-- ============ END HIỂN THỊ ẢNH THÔNG BÁO ==============--> </div> </div> </div> <script type="text/javascript"> function showPopUpBanner() { $('.popUpBannerBox').fadeIn("2000"); } setTimeout(showPopUpBanner, 1000); //thời gian popup bắt đầu hiển thị $('.popUpBannerBox').click(function(e) { if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) { $('.popUpBannerBox').fadeOut("2000"); return false; } }); $('.closeButton').click(function() { $('.popUpBannerBox').fadeOut("2000"); return false; }); </script> </div>

* Sau khi bạn chèn đoạn mã trên vào website bạn nhớ thay đổi link ảnh banner hiện nhé.

Có rất nhiều cách để chèn đoạn mã tạo Popup hiển thị giữa website, Ở trên là cách đơn giản nhất bạn có thể áp dụng vào tất cả các mã nguồn như Asp, PHP hoặc WordPress…vv.

CHÚC CÁC BẠN THÀNH CÔNG