Loading...

Modal & Notification header small text goes here...

Gritter Notifications

Description
Add default notification. Demo
Add sticky notification Demo
Add notification without image Demo
Add a white notification Demo
Add notification (with callbacks) Demo
Add a sticky notification (with callbacks) Demo
Add notification with max of 3 Demo
Remove all notifications Demo
Remove all notifications (with callbacks) Demo
<!-- required files -->
<link href="../assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet" />
<script src="../assets/plugins/gritter/js/jquery.gritter.js"></script>

<script>
  $.gritter.add({
    title: 'This is a sticky notice!',
    text: '...',
    image: '../assets/img/user/user-2.jpg',
    sticky: true,
    time: '',
    class_name: 'my-sticky-class gritter-light',
    before_open: function(){ },
    after_open: function(e){ },
    before_close: function(manual_close) { },
    after_close: function(manual_close){ } 
  });
  
  $.gritter.removeAll({
    before_close: function(e){ },
    after_close: function(){ }
  });
</script>

Modal

Description
Default Modal Dialog Box. Demo
Modal Dialog Box with fade out animation. Demo
Modal Dialog Box with full width white background. Demo
Modal Dialog Box with alert message. Demo
<!-- toggler -->
<a href="#modal-dialog" class="btn btn-primary" data-bs-toggle="modal">Modal</a>

<!-- #modal-dialog -->
<div class="modal fade" id="modal-dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Dialog</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <a href="javascript:;" class="btn btn-white" data-bs-dismiss="modal">Close</a>
        <a href="javascript:;" class="btn btn-success">Action</a>
      </div>
    </div>
  </div>
</div>

Bootstrap SweetAlert NEW

SweetAlert for Bootstrap. A beautiful replacement for JavaScript's "alert"


Try any of those!

<!-- required files -->
<script src="../assets/plugins/sweetalert/dist/sweetalert.min.js"></script>

<script>
  swal({
    title: 'Are you sure?',
    text: 'You will not be able to recover this imaginary file!',
    icon: 'info',
    buttons: {
      cancel: {
        text: 'Cancel',
        value: null,
        visible: true,
        className: 'btn btn-default',
        closeModal: true,
      },
      confirm: {
        text: 'Primary',
        value: true,
        visible: true,
        className: 'btn btn-primary',
        closeModal: true
      }
    }
  });
</script>
App Settings
Header Fixed
Header Inverse
Sidebar Fixed
Sidebar Grid
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage