Hướng dẫn tạo widget thông báo có nút tắt cực đẹp

Share:
Hướng dẫn tạo widget thông báo có nút tắt cực đẹp

Hướng dẫn tạo widget thông báo có nút tắt cực đẹp

Hồng Hải đã đăng Thứ Ba, 10 tháng 7, 2018
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Ủng hộ tôi

  • Xem toàn trang
  • Hello sau nhiều ngày vắng bóng mình đã quay trở lại và mình có dạo trên codepen thì có thấy một widget rất đẹp muốn share cho mọi người!!!!
    CÁCH THỰC HIỆN
    Bước 1: Ta chèn đoạn code phía dưới vào trước thẻ ]]></b:skin> nhé
    .toast__container {
        display: table-cell;
        vertical-align: middle;
    }
    .toast__cell{
      display:inline-block;
    }
    .add-margin{
      margin-top:20px;
    }
    .toast__svg{
      fill:#fff;
    }
    .toast {
      text-align:left;
        padding: 21px 0;
        background-color:#fff;
        border-radius:4px;
        max-width: 500px;
        top: 0px;
        position:relative;
        box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
    }

    .toast:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
      border-top-left-radius:4px;
      border-bottom-left-radius: 4px;
    }
    .toast__icon{
      position:absolute;
      top:50%;
      left:22px;
      transform:translateY(-50%);
      width:14px;
      height:14px;
      padding: 7px;
      border-radius:50%;
      display:inline-block;
    }
    .toast__type {
      color: #3e3e3e;
      font-weight: 700;
      margin-top: 0;
      margin-bottom: 8px;
    }
    .toast__message {
        font-size: 14px;
        margin-top: 0;
      margin-bottom: 0;
        color: #878787;
    }
    .toast__content{
      padding-left:70px;
      padding-right:60px;
    }
    .toast__close {
        position: absolute;
        right: 22px;
        top: 50%;
        width: 14px;
        cursor:pointer;
        height: 14px;
      fill:#878787;
        transform: translateY(-50%);
    }
    .toast--green .toast__icon{
      background-color:#2BDE3F;
    }
    .toast--green:before{
      background-color:#2BDE3F;
    }
    .toast--blue .toast__icon{
      background-color:#1D72F3;
    }
    .toast--blue:before{
      background-color:#1D72F3;
    }
    .toast--yellow .toast__icon{
      background-color:#FFC007;
    }
    .toast--yellow:before{
      background-color:#FFC007;
    }
    Bước 2: Ta chèn code bên dưới vào trước thẻ </body> nhé
    <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('.toast__close').click(function(e){
        e.preventDefault();
        var parent = $(this).parent('.toast');
        parent.fadeOut("slow", function() { $(this).remove(); } );
      });
    });
    </script>
    Bước 3: Ta thêm code bên dưới vào chỗ bạn muốn hiển thị là được.
    <div class="toast__container">
    <div class="toast__cell">
    <div class="toast toast--green">
    <div class="toast__icon">
    <svg class="toast__svg" style="enable-background: new 0 0 512 512;" version="1.1" viewbox="0 0 512 512" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
    <g><g><path d="M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0    c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7    C514.5,101.703,514.499,85.494,504.502,75.496z"></path>
     </g></g>
        </svg>
      </div>
    <div class="toast__content">
    <div class="toast__type">
    Demo</div>
    <div class="toast__message">
    Thêm Vài dòng mô tả của bạn ở đây.</div>
    </div>
    <div class="toast__close">
    <svg enable-background="new 0 0 15.642 15.642" version="1.1" viewbox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z" fill-rule="evenodd"></path>
    </svg>
      </div>
    </div>
    <div class="toast toast--blue add-margin">
    <div class="toast__icon">
    <svg class="toast__svg" style="enable-background: new 0 0 32 32;" version="1.1" viewbox="0 0 32 32" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
    <g>
     <g id="info">
      <g>
       <path d="M10,16c1.105,0,2,0.895,2,2v8c0,1.105-0.895,2-2,2H8v4h16v-4h-1.992c-1.102,0-2-0.895-2-2L20,12H8     v4H10z"></path>
       <circle cx="16" cy="4" r="4"></circle>
      </g>
     </g>
    </g>
        </svg>
      </div>
    <div class="toast__content">
    <div class="toast__type">
    Demo</div>
    <div class="toast__message">
    Thêm Vài dòng mô tả của bạn ở đây.</div>
    </div>
    <div class="toast__close">
    <svg enable-background="new 0 0 15.642 15.642" version="1.1" viewbox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z" fill-rule="evenodd"></path>
    </svg>
      </div>
    </div>
    <div class="toast toast--yellow add-margin">
    <div class="toast__icon">
    <svg class="toast__svg" style="enable-background: new 0 0 301.691 301.691;" version="1.1" viewbox="0 0 301.691 301.691" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
    <g>
     <polygon points="119.151,0 129.6,218.406 172.06,218.406 182.54,0  "></polygon>
     <rect height="40.523" width="40.525" x="130.563" y="261.168"></rect>
    </g>
        </svg>
      </div>
    <div class="toast__content">
    <div class="toast__type">
    Demo</div>
    <div class="toast__message">
    Thêm Vài dòng mô tả của bạn ở đây.</div>
    </div>
    <div class="toast__close">
    <svg enable-background="new 0 0 15.642 15.642" version="1.1" viewbox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z" fill-rule="evenodd"></path>
    </svg>
      </div>
    </div>
    </div>
    </div>
    Chúc các bạn thành công!!!
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    18 nhận xét:

    1. chỗ muốn hiển thị thường thì ở đâu là được nhất vậy anh

      Trả lờiXóa

    Author Image

    Hồng Hải

    Nếu thấy các bài viết trên blog hữu ích đối với bạn thì hãy mời tôi một ly cà phê tại đây nhé. Xin cảm ơn!