Custom Toastr Notification In Laravel 9

Websolutionstuff | Sep-23-2022 | Categories : Laravel jQuery CSS

In this article, we will see a custom toastr notification in laravel 9. we will create a custom notification using HTML, CSS, and jquery. In this, we will not use any kind of JS. You can display a success message, info message, warning message, and error with the help of CSS in laravel 9.

Also, we can display toastr notifications with a font awesome icon. So, you can also customize the alert notification icon as per the requirements.  Also, you can customize as per your requirements like a progress bar, close button, and the timing of notification showing.

So, let's see toastr notification using CSS and custom alert notification in laravel 9.

Add HTML

In this step, we will add HTML and add google font in the <head> section.

<div class="alerts">
  <div class="alert sucess">    
    <span class="alert-icon"><i class="fas fa-check"></i>      
    </span>
    <span class="alert-content">
      <span class="alert-close"><i class="fas fa-times"></i></span>
      <span class="alert-title">Success</span>
      <span class="alert-subtitle">View details</span>
    </span>    
  </div>
  <div class="alert request">
    <span class="alert-icon"><i class="fas fa-exclamation"></i></span>
    <span class="alert-content">
      <span class="alert-close"><i class="fas fa-times"></i></span>
      <span class="alert-title">Request submitted</span>
      <span class="alert-subtitle">
        View details
        <ul class="little-list">
          <li>New account has been created</li>
          <li>New provider has been created</li>
          <li>New provider has been created</li>
          <li>New provider has been created</li>
        </ul>
      </span>
    </span>
  </div>
  <div class="alert wait">
    <span class="alert-icon"><i class="far fa-clock"></i></span>
    <span class="alert-content">
      <span class="alert-close"><i class="fas fa-times"></i></span>
      <span class="alert-title">Wait a Moment</span>
      <span class="alert-subtitle">
        View details
        <ul class="little-list">
          <li>New account has been created</li>
          <li>New provider has been created</li>
        </ul>
      </span>
    </span>
  </div>
  <div class="alert failed">
    <span class="alert-icon"><i class="fas fa-times"></i></span>
    <span class="alert-content">
      <span class="alert-close"><i class="fas fa-times"></i></span>
      <span class="alert-title">Failed</span>      
      <span class="alert-subtitle">
        View details
        <ul class="little-list">
          <li>New account has been created</li>
          <li>New provider has been created</li>
        </ul>
      </span>
    </span>
  </div>
</div>

Add google font in the <head> tag.

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> 

 

 

Add CSS

In this step, we will add CSS for custom alert message notifications.

.alerts {
	 top: 0;
	 bottom: 0;
	 position: fixed;
	 display: flex;
	 flex-flow: column;
	 font-family: 'Montserrat', sans-serif;
	 padding: 30px;
	 width: auto;
}
 .alerts .alert {
	 display: flex;
	 flex-flow: row;
	 margin: 10px 0;
	 width: 250px;
	 min-height: 90px;
	 height: auto;
	 background-color: #cecece;
	 border-radius: 4px;
	 color: #fff;
	 box-shadow: 0px 10px 46px -21px rgba(0, 0, 0, 0.75);
	 transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
	 cursor: pointer;
}
 .alerts .alert:hover {
	 box-shadow: 0px 10px 60px -21px rgba(0, 0, 0, 0.80);
}
 .alerts .alert.sucess {
	 background-color: #3db56e;
}
 .alerts .alert.request {
	 background-color: #67a4c0;
}
 .alerts .alert.wait {
	 background-color: #c3d2d9;
}
 .alerts .alert.failed {
	 background-color: #c84346;
}
 .alerts .alert-icon {
	 font-weight: 300;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 30%;
	 border-top-left-radius: 4px;
	 border-bottom-left-radius: 4px;
	 background-color: rgba(0, 0, 0, 0.2);
}
 .alerts .alert-content {
	 position: relative;
	 padding: 10px;
	 display: flex;
	 justify-content: center;
	 align-items: flex-start;
	 flex-flow: column;
	 width: 100%;
}
 .alerts .alert-content .alert-close {
	 position: absolute;
	 font-size: 0.7em;
	 top: 7px;
	 right: 10px;
	 cursor: pointer;
}
 .alerts .alert-content .alert-title {
	 padding-right: 12px;
	 font-size: 0.7em;
	 font-weight: 700;
}
 .alerts .alert-content .alert-subtitle {
	 display: flex;
	 flex-flow: column;
	 margin-top: 5px;
	 font-size: 0.4em;
	 font-weight: 300;
}
 .alerts .alert-content .alert-subtitle .little-list {
	 display: none;
	 padding: 0 10px;
}
/* demo */
 * {
	 padding: 0;
	 margin: 0;
}
 body, html {
	 height: 100%;
}
 body {
	 font-family: Montserrat, sans-serif;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 min-height: 100vh;
	 font-size: 1.5rem;
	 background-color: #bdbdbd;
}
 

Add font awesome CSS.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"> 

 

 

Add jQuery

Now, we will add jquery to close the notification and also add jquery.min.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
$(document).ready(function () {
  $( ".alert" ).click(function() {
    $( this ).find( ".little-list" ).slideToggle();
  });
  $( ".alert-close" ).click(function() {
    $( this ).parent().parent().fadeOut();
  });
});

Output:

custom alert notification in laravel 9

 


You might also like:

Recommended Post
Featured Post
How To Convert Image Into Base64 String Using jQuery
How To Convert Image Into Base...

In this example, we will see how to convert an image into a base64 string using jquery. Base64 encoding schemes are...

Read More

Jan-03-2022

Carbon Add Months To Date In Laravel 9
Carbon Add Months To Date In L...

In this article, we will see carbon add months to date in laravel 9. Carbon provides the addMonth() and addMon...

Read More

Nov-18-2022

Carbon Add Days To Date In Laravel
Carbon Add Days To Date In Lar...

In this article, we will see carbon add days to date in laravel. Carbon provides the addDay() and addDays() functions to...

Read More

Dec-03-2020

Stripe Payment Gateway Integration Example In Laravel 8
Stripe Payment Gateway Integra...

In this article, we will see a stripe payment gateway integration example in laravel 8. The stripe payment gateway...

Read More

Nov-26-2020