Bootstrap Toast
Basic
Bootstrapjust now
Hello,world!This is a toast message.
<button id="toast-btn" class="btn btn-primary">Open Toast</button><!-- Toast Element --><div style="position: absolute; top: 0; right: 22px;left: 22px;z-index: 9999;"><div class="toast toast-primary fade hide" role="alert" data-delay="6000" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="mr-auto">Bootstrap</strong><small class="meta-time">just now</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="toast-body">Hello,world!This is a toast message. </div></div></div>
// Get the Toast button var toastButton = document.getElementById("toast-btn");// Get the Toast element var toastElement = document.getElementsByClassName("toast")[0];toastButton.onclick = function(){$('.toast').toast('show')}SnackBar
Basic
<button class="btn btn-primary default">Default</button>$('.default').click(function(){Snackbar.show({text:'Example notification text.',duration:100000})});Top Left
<button class="btn btn-success top-left">Top Left</button>$('.top-left').click(function(){Snackbar.show({text:'Example notification text.',pos:'top-left'})});Top Center
<button class="btn btn-info top-center">Top Center</button>$('.top-center').click(function(){Snackbar.show({text:'Example notification text.',pos:'top-center'})});Top Right
<button class="btn btn-danger top-right">Top Right</button>$('.top-right').click(function(){Snackbar.show({text:'Example notification text.',pos:'top-right'})});Bottom Left
<button class="btn btn-warning bottom-left">Bottom Left</button>$('.bottom-left').click(function(){Snackbar.show({text:'Example notification text.',pos:'bottom-left'})});Bottom Center
<button class="btn btn-secondary bottom-center">Bottom Center</button>$('.bottom-center').click(function(){Snackbar.show({text:'Example notification text.',pos:'bottom-center'})});Bottom right
<button class="btn btn-dark bottom-right">Bottom right</button>$('.bottom-right').click(function(){Snackbar.show({text:'Example notification text.',pos:'bottom-right'})});No Action
<button class="btn btn-default no-action">No Action</button>$('.no-action').click(function(){Snackbar.show({showAction:false})});Action Text
<button class="btn btn-button-2 action-text">Action Text</button>$('.action-text').click(function(){Snackbar.show({actionText:'Thanks!'})});Text Color
<button class="btn btn-button-3 text-color">Text Color</button>$('.text-color').click(function(){Snackbar.show({actionTextColor:'#e2a03f',})});Click Callback
<button class="btn btn-button-4 click-callback">Click Callback</button>$('.click-callback').click(function(){Snackbar.show({text:'Custom callback when action button is clicked.',width:'auto',onActionClick:function(element){//Set opacity of element to 0 to close Snackbar $(element).css('opacity',0);Snackbar.show({text:'Thanks for clicking the Dismiss button!',showActionButton:false})}})});Duration
<button class="btn btn-button-5 duration">Duration</button>$('.duration').click(function(){Snackbar.show({text:'Duration set to 5s',duration:5000,})});Background Color
============= Primary ============= <button class="btn btn-primary snackbar-bg-primary">Primary</button>$('.snackbar-bg-primary').click(function(){Snackbar.show({text:'Primary',actionTextColor:'#fff',backgroundColor:'#1b55e2'})});============= Info ============= <button class="btn btn-info snackbar-bg-info">Info</button>$('.snackbar-bg-info').click(function(){Snackbar.show({text:'Info',actionTextColor:'#fff',backgroundColor:'#2196f3'})});============= Success ============= <button class="btn btn-success snackbar-bg-success">Success</button>$('.snackbar-bg-success').click(function(){Snackbar.show({text:'Success',actionTextColor:'#fff',backgroundColor:'#8dbf42'})});============= Warning ============= <button class="btn btn-warning snackbar-bg-warning">Warning</button>$('.snackbar-bg-warning').click(function(){Snackbar.show({text:'Warning',actionTextColor:'#fff',backgroundColor:'#e2a03f'})});============= Danger ============= <button class="btn btn-danger snackbar-bg-danger">Danger</button>$('.snackbar-bg-danger').click(function(){Snackbar.show({text:'Danger',actionTextColor:'#fff',backgroundColor:'#e7515a'})});============= Dark ============= <button class="btn btn-dark snackbar-bg-dark">Dark</button>$('.snackbar-bg-dark').click(function(){Snackbar.show({text:'Dark',actionTextColor:'#fff',backgroundColor:'#3b3f5c'})});Copyright © 2020 DesignReset,All Rights Reserved.
Coded with