Tạo nút hiển thị thông báo của Admin đơn giản và nhỏ gọn

Simple Modal for your website

Iris Tips đã từng chia sẻ cho các bạn khá nhiều style thông báo của admin khác nhau, hôm nay sẽ là 1 mẫu thông báo cực kỳ nhỏ gọn mà cũng không kém phần đẹp mắt dành cho website của bạn.

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

/* Modal button */
.modal-btn{font-family:'Baloo Bhaina',cursive;letter-spacing:1px;border:none;outline:none;cursor:pointer;padding:10px 25px;background-color:#ef6633;color:#fff;transition:all .3s}
.modal-btn:hover{background-color:#d25729}
/* Modal Iris-Tips.blogspot.com*/
.modal{background-color:rgba(0,0,0,.65);display:none;overflow:auto;position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%}
/* Modal Content */
.modal-content{position:relative;top:0;width:600px;margin:0 auto;background-color:#e5f361;//background-color:#fff;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.modal-animated-in{animation:totop-in .3s ease}
.modal-animated-out{animation:totop-out .3s ease forwards}
.modal-header{background-color:#111;width:100%;height:60px;line-height:60px;padding-left:20px}
.modal-content .close{position:absolute;right:0;top:0;background-color:#222;width:60px;height:60px;color:#fff;line-height:60px;text-align:center;cursor:pointer;transition:all .3s}
.modal-content .close:hover{background-color:#fff;color:#222}
/* Modal Body */
.modal-body{padding:0 20px}
.modal-body ul{margin:0;padding:0;list-style:none}
.modal-body ul li{position:relative;display:block;margin-left:20px;color:#555}
.modal-body ul li::before{position:absolute;content:'\f00c';color:#5cc560;left:-20px;top:10px;display:inline-block;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased}
/* Modal Footer */
.modal-footer{background-color:#111;width:100%;height:60px;line-height:60px;padding-left:20px}
.modal-header h3,.modal-footer h3{color:#fff}
/* Keyframes */
@keyframes totop-in{0%{top:600px;opacity:0}100%{top:0;opacity:1}}
@keyframes totop-out{0%{top:0;opacity:1}100%{top:-100%;opacity:0}}

2Tìm đến thẻ </body> và dán đoạn script bên dưới váo trước thẻ đó

<script type='text/javascript'>
$(function() {
  
  // Vars
  var modBtn  = $('#modBtn'),
      modal   = $('#modal'),
      close   = modal.find('.close'),
      modContent = modal.find('.modal-content');
  
  // open modal when click on open modal button 
  modBtn.on('click', function() {
    modal.css('display', 'block');
    modContent.removeClass('modal-animated-out').addClass('modal-animated-in');
  });
  
  // close modal when click on close button or somewhere out the modal content 
  $(document).on('click', function(e) {
    var target = $(e.target);
    if(target.is(modal) || target.is(close)) {
      modContent.removeClass('modal-animated-in').addClass('modal-animated-out').delay(300).queue(function(next) {
        modal.css('display', 'none');
        next();
      });
    }
  });
  
});
</script>

3Thêm thư viện jQuery dưới đây vào trước đoạn code ở bước 2 nếu như website của bạn chưa có

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

4Cuối cùng là thêm đoạn HTML sau vào vị trí bạn cần hiện thị nút thông báo

  <!-- Modal button -->
  <button id="modBtn" class="modal-btn">Mở thông báo</button>
</div>  

<!-- Modal -->
<div id="modal" class="modal">
  <!-- Modal Content -->
  <div class="modal-content">
    <!-- Modal Header -->
    <div class="modal-header">
      <h3 class="header-title">Thông báo của Admin</h3>
      <div class="close fa fa-close"></div>    
    </div>
    <!-- Modal Body -->
    <div class="modal-body">
      <h3>Tiêu đề</h3>
      <p>Đây là phần nội dung của thông báo</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus voluptatem amet voluptatum fuga temporibus.</p>
      <ul>
        <li>Phosfluorescently fashion ubiquitous schemas through.</li>
        <li>Rapidiously empower premier initiatives whereas.</li>
        <li>Credibly disintermediate economically sound.</li>
        <li>Efficiently grow prospective bandwidth.</li>
      </ul>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit natus nemo et magni soluta voluptatibus quas quasi pariatur necessitatibus, totam, officia id at praesentium fuga molestias numquam ullam iure accusamus.</p>
    </div>
    <div class="modal-footer">
      <h3>- Iris Tips - </h3>
    </div>
  </div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by ahmed beheiry/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm