# SweetAlert

SweetAlert A beautiful replacement for JavaScript's "alert".

please refer SweetAlert documentation (opens new window) to learn more about plugin

# How to use

Step 1

include following CSS code in the page you want to use inside @section('header_styles') section

<link href="{{ asset('vendors/sweetalert/css/sweetalert2.css') }}" rel="stylesheet" type="text/css" />

Step 2

include following js code at @section('footer_scripts') section

<script src="{{ asset('vendors/sweetalert/js/sweetalert2.js') }}" type="text/javascript"></script>

step 3

write html markup for it.


<div class="form-group">
 <button type="button" class="btn btn-outline-info" id="btn1"> Simple Alert

Step 4

now, we need to initialize the plugin

you can place below code inside footer_scripts section or for better management, you can keep in a separate js file and reference that file in the current page.

Note: be sure to place initialization code below plugin js file

Swal.fire('Here\'s your text message in the sweet alert!');

i.e. we are initializing it as swalWithBootstrapButtons.fire() class.Because to apply our bootstrap-colours in it.If you don't want ignore it.



# more examples

We have added many more examples and customization.

you can find code in following pages resources/views/admin/sweetalert.blade.php and resources/js/pages/custom_sweetalert.js

# Used In




Last Updated: 2/13/2021, 3:18:10 PM