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="flex justify-center mb-4 p-6 pb-0">
    <div x-data="sweetalert2">
      <button  id="sweetalert-basic"
        class=" px-6 py-2 text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600 ">
        Try Me
      </button>
    </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="flex justify-center p-6 pb-0">
    <div x-data="sweetalert2">
      <button  id="sweetalert-title"
        class=" px-6 py-2 text-white transition-all duration-500 ease-in-out bg-blue-500 border border-blue-500 rounded shadow-md hover:shadow-xl hover:bg-blue-600 focus:bg-blue-600 ">
        Try Me
      </button>
    </div>
  </div>
Script
document.addEventListener('alpine:init', () => {
  Alpine.data('sweetalert2', () => ({
      fire(message) {
          swal.fire(message)
      },
      sweetalerttitle(){
        Swal.fire({
          title: 'The Internet?',
          text: 'That thing is still around? question',
          backdrop: `rgba(60,60,60,0.8)`
        })
      },
  }))
})
Previous Next