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.

ex:

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

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

 $('#btn1').on('click',function(){
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.

Output

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

resources/views/admin/sweetalert.blade.php

resources/views/admin/editable_table.blade.php

resources/views/admin/builder.blade.php