Sweetalert2

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes

Basic message

<button class="btn btn-primary" id="swal-message">Message</button>

Question

<button class="btn btn-primary" id="swal-question">Question</button>

Alerts

<button class="btn btn-warning" id="swal-warning">Warning</button>
 <button class="btn btn-danger" id="swal-error">Error</button>
 <button class="btn btn-success" id="swal-success">Success</button>
 <button class="btn btn-info" id="swal-info">Info</button>

Rtl

<button class="btn btn-primary" id="swal-rtl-container">rtl</button>

Html

 <button class="btn btn-primary" id="swal-html">Html</button>

Sweetalerts positions

<button class="btn btn-success mb-2 swal-alrt-btn" data-position="top">Top</button>
<button class="btn btn-success mb-2 swal-alrt-btn" data-position="top-end">Top end</button>
<button class="btn btn-success mb-2 swal-alrt-btn" data-position="top-start">Top start</button>
<button class="btn btn-success mb-2 swal-alrt-btn" data-position="center">Center</button>
<button class="btn btn-success mb-2 swal-alrt-btn" data-position="center-start">Center start</button>
<button class="btn btn-success mb-2 swal-alrt-btn" data-position="center-end">Center end</button>
<button class="btn btn-success mb-2 swal-alrt-btn" data-position="bottom">Bottom</button>
<button class="btn btn-success mb-2 swal-alrt-btn" data-position="bottom-start">Bottom start</button>
<button class="btn btn-success mb-2 swal-alrt-btn" data-position="bottom-end">Bottom end</button>

Delete

<button class="btn btn-danger" id="swal-delete">Delete</button>

Custom image

<button class="btn btn-primary" id="swal-custom-image">Custom image</button>

Auto close

<button class="btn btn-primary" id="swal-auto-close">Auto close</button>

Question answers

<button class="btn btn-primary" id="swal-question-answers">Question answers</button>

Sweetalerts Form

<button class="btn btn-primary mb-2" id="swal-input">Input</button>