Material Admin Extended Dark

## SweetAlert2 Dialogs

A beautiful and customizable replacement for JavaScript's popup boxes.

Official website and detailed documentation at https://limonte.github.io/sweetalert2/

In order to check the previews of these notifications, please visit the page `/notification-dialog.html`

In order to use these plugin, make sure to include it's CSS and Javascript asset files in the `<head>` section.

    <!-- CSS -->
    <link href="vendors/bower_components/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">

    <!-- JS -->
    <script src="vendors/bower_components/sweetalert2/dist/sweetalert2.min.js"></script>

#### Basic Example

    <button class="btn btn--light" id="sa-basic">Click me</button>

    $('#sa-basic').click(function(){
        swal("Here's a message!");
    });

#### A success message

    <button class="btn btn--light" id="sa-success">Click me</button>

    $('#sa-success').click(function(){
        swal(
            "Good job!",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat, tincidunt vitae ipsum et, pellentesque maximus enim. Mauris eleifend ex semper, lobortis purus sed, pharetra felis",
            "success"
        )
    });

#### A Warning message

    <button class="btn btn--light" id="sa-warning">Click me</button>

    $('#sa-warning').click(function(){
        swal(
            "Not a good sign...",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat, tincidunt vitae ipsum et, pellentesque maximus enim. Mauris eleifend ex semper, lobortis purus sed, pharetra felis",
            "warning"
        )
    });

#### Question

    <button class="btn btn--light" id="sa-question">Click me</button>

    $('#sa-question').click(function(){
        swal(
            "Hmm.. what did you say?",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat, tincidunt vitae ipsum et, pellentesque maximus enim. Mauris eleifend ex semper, lobortis purus sed, pharetra felis",
            "question"
        )
    });

#### A warning message with a function

    <button class="btn btn--light" id="sa-function">Click me</button>

    $('#sa-function').click(function(){
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!"
        }).then(function(){
            swal(
                "Deleted!",
                "Your imaginary file has been deleted.",
                "success"
            );
        });
    });

#### Custom Image Header

    <button class="btn btn--light" id="sa-image">Click me</button>

    $('#sa-image').click(function(){
        swal({
            title: "Sweet!",
            text: "Here's a custom image.",
            imageUrl: "demo/img/thumbs-up.png"
        });
    });

#### Auto close timer

    <button class="btn btn--light" id="sa-close">Click me</button>

    $('#sa-close').click(function(){
        swal({
            title: "Auto close alert!",
            text: "I will close in 2 seconds.",
            timer: 2000,
            showConfirmButton: false
        });
    });

Source files:

- Plugin
  - CSS: `/vendors/bower_components/sweetalert2/dist/sweetalert2.min.css`
  - JS: `/vendors/bower_components/sweetalert2/dist/sweetalert2.min.js`
- LESS: `/less/inc/vendor-overrides/sweetalert.less`
- HTML: `/notification-dialog.html`
- JS(demo): `/demo/js/misc.js`