toastr.js

In this example below you will see how to do a toastr.js with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>toastr.js</title>
  <link rel="stylesheet" type="text/css"  href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <input type="button" value="New Pastoral Record" id="error" />
<input type="button" value="More than 6" id="info" />
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/toastrjs-OOQpmp */
#toast-container>.toast-error {
  background-image: none !important;

}
#toast-container>div {
  padding: 0;
  border-radius:5px;
  opacity:1;
  background: #ffffff;
  color:#212121;
  font-family: sans-serif;
  width: 400px;
  font-size: 14px;
}
#toast-container>div .fa {
  margin-right: 5px;
}
.toast-title {
  font-weight: 500;
  padding:5px 10px;
  background: #b34d4a;
  color:#fff
}
.toast-close-button:focus, .toast-close-button:hover {
  opacity:1;
  
}
.toast-close-button:focus:before, .toast-close-button:hover:before {
  background: #444!important;
  color:#fff;
  border-color:#444;
}
.toast-close-button {
  position:relative;
  background:#fff!important;
  font-size:14px;
  font-weight:500;
  color:#212121;
  opacity:1;
  
}
.toast-close-button:before {
  content: 'Close';
  position:absolute;
  right:0;
  width: 50px;
  padding:13px 10px;
  background:#fff!important;
  border:1px solid #ccc;
  border-bottom: 0;
}
.toast-info .toast-close-button:before{
  content: 'Close Visible';
  padding: 7px 10px;
  font-size: 13px;
}
.not-time {
  display: inline-block;
  float: right;
  margin-right: 63px;
  font-weight: 600;
}
.toast-message {
  padding: 12px 10px 5px;
  position: relative;
  margin-bottom: 0;
}
.toast-message p {
  margin-bottom: 0;
}
.snooze {
  position:absolute;
  right:0;
  top: 9px;
  padding:12px 10px;
  background: #ffffff;
  border-top:1px solid #ccc;
  border-left:1px solid #ccc;
  border-bottom: 0;
  border-right: 0;
}
.toast-info .snooze {
  width: 68px;
  top: 10px;
  padding: 4px 10px;
  font-size: 13px;
}
.toast-info .snooze:hover,
.toast-info .snooze:active,
.toast-info .snooze:focus {
  background: #555555;
  color: #ffffff;
}
.toastr-color {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  display: inline-block;
  
}
.toastr-color.bullying {
  background: #744da0;
}
.toastr-name {
  display: inline-block;
  float: right;
  margin-right: 63px;
  vertical-align: bottom;
      margin-top: 3px;
}
/* Styles for select */

#toast-container #snooze-period-button {
  position: absolute;
  top: 10px;
  right: -4px;
  border-radius: 0 0 4px 0;
}
#toast-container .ui-selectmenu-text{
  border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#toast-container .ui-selectmenu-button span.ui-icon  {
  display: none;
}
#toast-container .ui-selectmenu-text {
  padding: 11px ;
  font-size: 13px;
}
#toast-container .ui-selectmenu-text:hover,
#toast-container .ui-selectmenu-text:active,
#toast-container .ui-selectmenu-text:focus{
  background: #555555;
  color:#fff;
  border-color:#555;
  border-radius: 0 0 4 0;
}
li.ui-menu-item {
    font-size: 12px;
  padding:0!important;
}
.ui-selectmenu-open {
  top:65px!important;
  right:12px!important;
  left:auto!important;
}
.ui-selectmenu-menu .ui-menu {
  width: 150px!important;
  border:0;
  box-shadow: 0 0 12px #999;
}
.ui-menu-item-wrapper {
  padding: 7px 10px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border:0;
  border-left:6px solid orange;
  background: #555555;
  color: #ffffff;
  
}
div#ui-id-1 {
    display: none;
}

/*Downloaded from https://www.codeseek.co/DM_Daria/toastrjs-OOQpmp */
 $( function() {
    $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
      _renderItem: function( ul, item ) {
        var li = $( "<li>" ),
          wrapper = $( "<div>", { text: item.label } );
 
        if ( item.disabled ) {
          li.addClass( "ui-state-disabled" );
        }
 
        $( "<span>", {
          style: item.element.attr( "data-style" ),
          "class": "ui-icon " + item.element.attr( "data-class" )
        })
          .appendTo( wrapper );
 
        return li.append( wrapper ).appendTo( ul );
      }
    });

    $( "#snooze-period" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons" );

  } );
$(function () {
    $('#error').click(function () {
        // make it not dissappear
        toastr.error("<p>Bullying<span class='toastr-color bullying '></span><span class='toastr-name'>JONES, Sarah</span></p><select name='snooze' id='snooze-period'><option disabled selected>Snooze</option><option value='1'>for 1 minute</option><option value='5'>for 5 minutes</option><option value='10'>for 10 minutes</option><option value='15'>for 15 minutes</option><option value='30'>for 30 minutes</option><option value='60'>for 1 hour</option><option value='120'>for 2 hours</option><option value='240'>for 4 hours</option><option value='1440'>for 1 day</option><option value='10080'>for 1 week</option><option value='dismiss'>Dismiss</option></select>", "<i class='fa fa-handshake-o'></i>NEW Pastoral Actionable Note - for you <span class='not-time'>16:45</span>", {
           "closeButton": true,
          "debug": true,
          "newestOnTop": false,
          "progressBar": false,
          "positionClass": "toast-top-right",
          "preventDuplicates": true,
          "showDuration": "300",
          "hideDuration": "1000",
          "timeOut": 0,
          "extendedTimeOut": 0,
          "showEasing": "swing",
          "hideEasing": "linear",
          "showMethod": "fadeIn",
          "hideMethod": "fadeOut",
          "tapToDismiss": false
        });
      $( "#snooze-period" ).selectmenu();
    });
  
    $('#info').click(function () {
   		// title is optional
        toastr.info("<p>You have more notifications..</p><button type='button' class='btn snooze'>Close<br>All</button>", "<i class='fa fa-camera-retro'></i>",{
           "closeButton": true,
          "debug": true,
          "newestOnTop": false,
          "progressBar": false,
          "positionClass": "toast-top-right",
          "preventDuplicates": false,
          "showDuration": "300",
          "hideDuration": "1000",
          "timeOut": 0,
          "extendedTimeOut": 0,
          "showEasing": "swing",
          "hideEasing": "linear",
          "showMethod": "fadeIn",
          "hideMethod": "fadeOut",
          "tapToDismiss": false
        });
    });
   

});

Comments