Documentation

Ctrl+K
Vue

Sweet Alert

A short communication sent from one person to another or the central theme or idea of a communication. For more details

A Basic Message

HTML Code

<div class="card">
   <div class="card-body text-center">
      <button id="sweetalert-basic" class="btn btn-primary ">Try Me</button>
   </div>
</div>

Script

document.addEventListener('DOMContentLoaded', function () {
    const basic = document.getElementById('sweetalert-basic')
    if (basic) {
        basic.addEventListener('click', function () {
        Swal.fire({
            title: 'Hello! This is a Basic Message.',
            backdrop: `rgba(60,60,60,0.8)`,
        })
        });
    }
});
Title with a Text

HTML Code

<div class="card">
   <div class="card-body text-center">
   <button id="sweetalert-title" class="btn btn-primary ">Try Me</button>
   </div>
 </div>

Script

const title = document.getElementById('sweetalert-title')
    if (title) {
        title.addEventListener('click', function () {
        Swal.fire({
            title: 'The Internet?',
            text: 'That thing is still around? question',
            backdrop: `rgba(60,60,60,0.8)`
        })
    });
}
Previous Next