<button class="mr-2 btn btn-primary success">Success message!</button>$('.widget-content .success').on('click', function () {  swal({      title: 'Good job!',      text: "You clicked the!",      type: 'success',      padding: '2em'    })})

<button class="mr-2 btn btn-primary dynamic-queue">Dynamic queue</button>$('.widget-content .dynamic-queue').on('click', function () {    const ipAPI = 'https://api.ipify.org?format=json'    swal.queue([{        title: 'Your public IP',        confirmButtonText: 'Show my public IP',        text:          'Your public IP will be received ' +          'via AJAX request',        showLoaderOnConfirm: true,        preConfirm: function() {          return fetch(ipAPI)            .then(function (response) {                 return response.json();            })            .then(function(data) {               return swal.insertQueueStep(data.ip)            })            .catch(function() {              swal.insertQueueStep({                type: 'error',                title: 'Unable to get your public IP'              })            })        }    }])})

<button class="mr-2 btn btn-primary  title-text">Title & text</button>$('.widget-content .title-text').on('click', function () {  swal({      title: 'The Internet?',      text: "That thing is still around?",      type: 'question',      padding: '2em'  })})

<button class="mr-2 btn btn-primary chaining-modals">Chaining modals (queue)</button>$('.widget-content .chaining-modals').on('click', function () {  swal.mixin({    input: 'text',    confirmButtonText: 'Next →',    showCancelButton: true,    progressSteps: ['1', '2', '3'],    padding: '2em',  }).queue([    {      title: 'Question 1',      text: 'Chaining swal2 modals is easy'    },    'Question 2',    'Question 3'  ]).then(function(result) {    if (result.value) {      swal({        title: 'All done!',        padding: '2em',        html:          'Your answers: <pre>' +            JSON.stringify(result.value) +          '</pre>',        confirmButtonText: 'Lovely!'      })    }  })})

<button class="mr-2 btn btn-primary html-jquery">Custom animation</button>$('.widget-content .html-jquery').on('click', function () {  swal({    title: 'Custom animation with Animate.css',    animation: false,    customClass: 'animated tada',    padding: '2em'  })})

<button class="mr-2 btn btn-primary timer">Message timer</button>$('.widget-content .timer').on('click', function () {  swal({    title: 'Auto close alert!',    text: 'I will close in 2 seconds.',    timer: 2000,    padding: '2em',    onOpen: function () {      swal.showLoading()    }  }).then(function (result) {    if (      // Read more about handling dismissals      result.dismiss === swal.DismissReason.timer    ) {      console.log('I was closed by the timer')    }  })})

<button class="mr-2 btn btn-primary custom-image">Message with custom image</button>$('.widget-content .custom-image').on('click', function () {  swal({    title: 'Sweet!',    text: 'Modal with a custom image.',    imageUrl: 'assets/img/thumbs-up.jpg',    imageWidth: 400,    imageHeight: 200,    imageAlt: 'Custom image',    animation: false,    padding: '2em'  })})

<button class="mr-2 btn btn-primary  html">Custom Description & buttons</button>$('.widget-content .html').on('click', function () {  swal({    title: '<i>HTML</i> <u>example</u>',    type: 'info',    html:      'You can use <b>bold text</b>, ' +      '<a href="//github.com">links</a> ' +      'and other HTML tags',    showCloseButton: true,    showCancelButton: true,    focusConfirm: false,    confirmButtonText:      '<i class="flaticon-checked-1"></i> Great!',    confirmButtonAriaLabel: 'Thumbs up, great!',    cancelButtonText:    '<i class="flaticon-cancel-circle"></i> Cancel',    cancelButtonAriaLabel: 'Thumbs down',    padding: '2em'  })})

<button class="mr-2 btn btn-primary  warning confirm">Confirm</button>$('.widget-content .warning.confirm').on('click', function () {  swal({      title: 'Are you sure?',      text: "You won't be able to revert this!",      type: 'warning',      showCancelButton: true,      confirmButtonText: 'Delete',      padding: '2em'    }).then(function(result) {      if (result.value) {        swal(          'Deleted!',          'Your file has been deleted.',          'success'        )      }    })})

<button class="mr-2 btn btn-primary  warning cancel">Addition else for "Cancel".</button>$('.widget-content .warning.cancel').on('click', function () {  const swalWithBootstrapButtons = swal.mixin({    confirmButtonClass: 'btn btn-success btn-rounded',    cancelButtonClass: 'btn btn-danger btn-rounded mr-3',    buttonsStyling: false,  })  swalWithBootstrapButtons({    title: 'Are you sure?',    text: "You won't be able to revert this!",    type: 'warning',    showCancelButton: true,    confirmButtonText: 'Yes, delete it!',    cancelButtonText: 'No, cancel!',    reverseButtons: true,    padding: '2em'  }).then(function(result) {    if (result.value) {      swalWithBootstrapButtons(        'Deleted!',        'Your file has been deleted.',        'success'      )    } else if (      // Read more about handling dismissals      result.dismiss === swal.DismissReason.cancel    ) {      swalWithBootstrapButtons(        'Cancelled',        'Your imaginary file is safe :)',        'error'      )    }  })})

<button class="mr-2 btn btn-primary  custom-width-padding-background">Custom Message</button>$('.widget-content .custom-width-padding-background').on('click', function () {  swal({    title: 'Custom width, padding, background.',    width: 600,    padding: "7em",    customClass: "background-modal",    background: '#fff url(assets/img/sweet-bg.jpg) no-repeat 100% 100%',  })})

<button class="mr-2 btn btn-primary  footer">With Footer</button>$('.widget-content .footer').on('click', function () {  swal({    type: 'error',    title: 'Oops...',    text: 'Something went wrong!',    footer: '<a href>Why do I have this issue?</a>',    padding: '2em'  })})

<button class="mr-2 btn btn-primary  RTL">RTL</button>$('.widget-content .RTL').on('click', function () {  swal({    title: 'هل تريد الاستمرار؟',    confirmButtonText:  'نعم',    cancelButtonText:  'لا',    showCancelButton: true,    showCloseButton: true,    padding: '2em',    target: document.getElementById('rtl-container')  })})

<button class="mr-2 btn btn-primary  mixin">Mixin</button>$('.widget-content .mixin').on('click', function () {  const toast = swal.mixin({    toast: true,    position: 'top-end',    showConfirmButton: false,    timer: 3000,    padding: '2em'  });  toast({    type: 'success',    title: 'Signed in successfully',    padding: '2em',  })})