# Sweet Alerts

A beautiful, responsive, customizable, accessible replacement for Javascript’s popup boxes.

Official Documentation

## Usage

### CSS

In order to use this plugin on your page you will need to include the following styles in the Page CSS area from the page’s head section:

    <link rel="stylesheet" href="../../assets/libs/sweetalert2/dist/sweetalert2.min.css">

### JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

    <script src="../../assets/libs/sweetalert2/dist/sweetalert2.min.js"></script>

### Initialization

SweetAlert2 automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. It’s even highly customizeable, as you can see below!

## Examples

Show code

    <button class="btn btn-primary" data-toggle="sweet-alert" data-sweet-alert="basic">Basic alert</button>
    <button class="btn btn-info" data-toggle="sweet-alert" data-sweet-alert="info">Info alert</button>
    <button class="btn btn-success" data-toggle="sweet-alert" data-sweet-alert="success">Success alert</button>
    <button class="btn btn-warning" data-toggle="sweet-alert" data-sweet-alert="warning">Warning alert</button>
    <button class="btn btn-dark" data-toggle="sweet-alert" data-sweet-alert="question">Question</button>

### Advanced

Show code

    <button class="btn btn-primary" data-toggle="sweet-alert" data-sweet-alert="confirm">Confim alert</button>
    <button class="btn btn-primary" data-toggle="sweet-alert" data-sweet-alert="timer">Timer alert</button>
    <button class="btn btn-primary" data-toggle="sweet-alert" data-sweet-alert="image">Image alert</button>