Ở 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


Previous Post Next Post

6 Comments

+ 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 CoderJune 10, 2018 at 12:30 AM

    DEMO VIDEO YOUTUBE cho mọi người

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

    ReplyDelete
  2. Lê Hồng NamJune 10, 2018 at 11:48 PM

    hay lắm a bờm

    ReplyDelete
    Replies
    1. Hùng CoderJune 11, 2018 at 6:20 AM

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

      Delete
  3. ÚT STARJune 12, 2018 at 3:03 AM

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

    ReplyDelete
  4. Lê Hồng NamJune 12, 2018 at 4:19 AM

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

    ReplyDelete
  5. Hùng CoderJune 12, 2018 at 4:24 AM

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

    ReplyDelete

Post a Comment

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