Modal & Notification header small text goes here...
| 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>| 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>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>