Ở 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.

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>
DEMO ở thanh MENU

Chúc các bạn thành công :)

Nguồn : Hung1001.blog


أحدث أقدم

6 تعليقات

+ Hiện tại HungCoder.Com đang cập nhật giao diện cho trang blog này. Nên sẽ có một số lỗi xãy ra khi các bạn xem blog này.

  1. Hùng Coder10 يونيو 2018 في 12:30 ص

    DEMO VIDEO YOUTUBE cho mọi người

    [youtube]https://www.youtube.com/watch?v=BR3Ut3y3GKU[/youtube]

    ردحذف
  2. Lê Hồng Nam10 يونيو 2018 في 11:48 م

    hay lắm a bờm

    ردحذف
    الردود
    1. Hùng Coder11 يونيو 2018 في 6:20 ص

      Haha. Dạo này đi đâu mà bạc vô âm tính thế e?

      حذف
  3. ÚT STAR12 يونيو 2018 في 3:03 ص

    Cái chỗ comment anh làm sao hay vậy , chèn dc youtube và code pro vậy.

    ردحذف
  4. Lê Hồng Nam12 يونيو 2018 في 4:19 ص

    nhưng mà cái chỗ ảnh đó ảnh , k bấm vào xem nhìn rõ được , mờ mờ ảo ảo anh ạ

    ردحذف
  5. Hùng Coder12 يونيو 2018 في 4:24 ص

    Cái đó thì a cũng ko rỏ e ạ, e vào hung1001.blog hỏi xem?

    ردحذف

إرسال تعليق

+ Hiện tại HungCoder.Com đang cập nhật giao diện cho trang blog này. Nên sẽ có một số lỗi xãy ra khi các bạn xem blog này.