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

<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

<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>
Summary