Modal & Notification header small text goes here...

Gritter Notifications

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>

    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){ } 
    before_close: function(e){ },
    after_close: function(){ }


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 class="modal-body">
      <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>

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>

    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
App Settings
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.
Header Fixed
Header Inverse
Sidebar Fixed
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage