Cách tạo icon thông báo và widget thông báo với hiệu ứng modal popup

Nếu bạn đã đọc bài viết Tự tạo hộp thoại modal không sử dụng plugin ngoài và áp dụng vào theme của mình, bạn có thể tận dụng làm widget thông báo để thông báo đến độc giả mỗi khi cần. Dưới dây mình sẽ hướng dẫn các bước thực hiện

Bước 1: Thêm widget HTML mới

Truy cập bố cục tiện ích thêm mới một widget HTML

Bước 2: Chỉnh sửa widget

Vào chỉnh sửa theme tìm đến widget HTML vừa thêm, mở thẻ tag <b:includable id='main'> của widget ra thay tất cả bên trong thành đoạn code html dưới đây

  <b:attr name='class' value='modal--target modal--html'/>

  <b:attr name='data-version' value=''/>

  <div class='modal--confirm'>

    <div class='modal--dialog'>

      <div class='_3em'/>

      <div class='modal--content'>

        <div class='modal--header'>

          <div class='_mht'>Thông báo</div>

          <div class='_mhc modal--icon modal--close'/>

        </div>

        <div class='modal--body'>

          <div><data:content/></div>

        </div>

        <div class='modal--footer'><button class='primary modal--close' type='button'>Đóng</button></div>

      </div>

      <div class='_3em'/>

    </div>

  </div>

Bước 3: Tạo thông báo

Sử dụng thẻ tag li cho mỗi một dòng thông báo, ví dụ:

<ul><li>Thông báo 1</li><li>Thông báo 2</li><li>Thông báo 3</li></ul>

Đoạn thông báo này chèn trong Nội dung khi Định cấu hình HTML/JavaScript ngoài bố cục tiện ích như hình minh họa dưới đây

Nếu không có thông báo, thay bằng thẻ tag p như sau:

<p>Hiện chưa có thông báo mới</p>

Bước 4: Thêm icon thông báo

Chèn icon thông báo vào vị trí muốn hiển thị

<a class="status-message modal--open" role="button" href="#HTML100" title="Thông báo">

  <div class="icon" data-icon-label="0">

    <svg width="24px" height="24px" viewBox="0 0 24 24"><path fill="#707070" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21"></path></svg>

  </div>

</a>

Với #HTML100 là id của widget HTML nha các bạn

Css cho giao diện icon

[data-icon-label] {

    position: relative;

    display: inline-block;

}

[data-icon-label]:after {

    content: attr(data-icon-label);

    position: absolute;

    font-style: normal;

    font-family: Arial, Sans-serif !important;

    top: -8px;

    right: -8px;

    font-weight: bolder;

    background-color: rgb(255, 0, 0);

    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);

    font-size: 11px;

    padding: 2px;

    opacity: .9;

    line-height: 13px;

    height: 13px;

    width: 13px;

    border-radius: 50%;

    color: #fff;

    text-align: center;

    z-index: 1;

    transition: transform .2s;

}

[data-icon-label="0"]:after{

    display: none;

}

Hiển thị có thông báo

Hiển thị không có thông báo

Bước 5: Thêm code jquery hiển thị số thông báo, chèn củng với code script theo bài trước

var li=$('#HTML100').find('li')
if(li.length){
  $('a.status-message>.icon').attr('data-icon-label',li.length)
}