Ở bài viết trước tôi đã giới thiệu cho các bạn 1 hộp thông báo ẩn hiện responsive đơn giản với js và css. Trong bài viết này, chúng ta sẽ cho nó màu mè thêm 1 chút bằng việc thiết kế theo phong cách Material.
Xem demo
Trong thủ thuật này tôi sử dụng font awesome 5
Tích hợp các thư viện cần thiết nếu blog bạn chưa có, chèn trước thẻ đóng </head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css'/>
Viết CSS
.material-noti-content, .material-noti-overlay { visibility: hidden; opacity: 0 } .material-noti-wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10 } .material-noti-content { background: #fff; padding: 25px; left: 50%; top: 40%; position: relative; -webkit-transform: translateX(-50%) translateY(-50%) !important; transform: translateX(-50%) translateY(-50%) !important; transition: all .3s ease-in-out; max-width: 60%; z-index: 1000; border-radius: 4px; box-shadow: 0 9px 46px 8px rgba(0, 0, 0, .14), 0 11px 15px -7px rgba(0, 0, 0, .12), 0 24px 38px 3px rgba(0, 0, 0, .2) } .material-noti-btn { z-index: 1000; text-decoration: none; font-size: 18px; color: #111 } .material-noti-overlay { position: fixed; top: 0; background: rgba(0, 0, 0, .59); left: 0; right: 0; bottom: 0; margin: 0; z-index: 999; transition: all .4s ease-in-out } .material-noti-title { margin-bottom: 15px; font-weight: 700; font-size: 20px } .material-noti-content.shows, .material-noti-overlay.shows { visibility: visible; opacity: 1 } .material-noti-content.shows { top: 50% } .material-noti-wrap.shows { z-index: 1000 } .material-noti-text { font-size: 16px; line-height: 1.5 } .close-noti { font-size: 20px; color: #111; position: absolute; top: 10px; right: 10px; margin: 10px 8px; padding:7px 10px } .done-wrap { margin-top: 20px; text-align: right } .done { font-size: 14px; color: #fff; background: #3949ab; padding: 9px 13px; font-weight: 700; border-radius: 3px; text-transform: uppercase; text-decoration: none } .done:hover,.close-noti:hover { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); cursor: pointer; transition: all .4s ease-in-out }
Đặt code HTML sau thẻ mở <body>
<div class='material-noti-wrap'> <div class='material-noti-content'> <div class='material-noti-title'>Notification</div> <div class='material-noti-text'> <!-- Viết thông báo vào đây --> </div> <div class='done-wrap'> <a class='close-noti' href='javascript:void(0)'><i class='fas fa-times'></i></a></div> <div class='done-wrap'> <a class='done' href='javascript:void(0)'>Done</a></div> </div> </div> <div class='material-noti-overlay'></div>
Đặt code js trước thẻ đóng </body>
<script type='text/javascript'>//<![CDATA[ $(document).ready(function() { $(".close-noti,.done").click(function() { $(".material-noti-wrap,.material-noti-content,.material-noti-overlay").removeClass("shows") }) }), $(document).ready(function() { $(".material-noti-btn").click(function() { $(".material-noti-wrap,.material-noti-content,.material-noti-overlay").toggleClass("shows") }) }); //]]></script>
Tạo button mở thông báo, đặt ở bất kì vị trí nào bạn mong muốn
<a class='material-noti-btn' href='javascript:void(0)' title='Notification'><i class='far fa-bell'></i></a>
Tùy chỉnh: tùy chỉnh css theo ý bạn, kiểm tra lại id hoặc class tránh xung đột code js, css
Với dialog box đơn giản này bạn có thể gửi tới thông báo dễ dàng cho người dùng. Để lại bình luận nếu bạn gặp khó khăn nhé
Chúc thành công !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên