#### Basic message

    <button class="mr-2 btn btn-primary message">Basic message</button>

    $('.widget-content .message').on('click', function () {
      swal({
          title: 'Saved succesfully',
          padding: '2em'
        })
    })

#### Success message

    <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'
        })
    })

#### Dynamic queue

    <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'
                  })
                })
            }
        }])

    })

#### A title with a text under

    <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'
      })

    })

#### Chaining modals (queue)

    <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!'
          })
        }
      })
    })

#### Custom animation

    <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'
      })
    })

#### Message with auto close timer

    <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')
        }
      })
    })

#### Message with custom image

    <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/300x300.jpg',
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
        animation: false,
        padding: '2em'
      })
    })

#### Custom HTML description and buttons

    <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'
      })

    })

#### Warning message, with "Confirm" button

    <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'
            )
          }
        })
    })

#### Execute something else for "Cancel".

    <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'
          )
        }
      })
    })

#### A message with custom width, padding and background

    <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/640x426.jpg) no-repeat 100% 100%',
      })
    })

#### With Footer

    <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'
      })
    })

#### RTL Support

    <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')
      })

    })

#### Mixin

    <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',
      })

    })