Remove "OK" button from sweet alert dialog

Question

I am using javascript sweetalert2 library.

I want to remove the OK button from the alert box but I did not find any property for not to display this button.

I am using the timer property timer:1000 for closing the alert in one second. So, I don't think there is a use of the ok button in this matter.

Solution 1

You can use these properties:

showCancelButton: false, // There won't be any cancel button
showConfirmButton: false // There won't be any confirm button

Like This

swal({
  title: 'Auto close alert!',
  text: 'I will close in 2 seconds.',
  timer: 2000,
  showCancelButton: false,
  showConfirmButton: false
}).then(
  function () {},
  // handling the promise rejection
  function (dismiss) {
    if (dismiss === 'timer') {
      //console.log('I was closed by the timer')
    }
  }
)

Solution 2

Update 4/6/2018

showCancelButton and showConfirmButton are no longer needed. Instead, you can set buttons: true to show both buttons, or buttons: false to hide all buttons. By default, only the confirm button is shown.

So now instead of doing

showCancelButton: false;

showConfirmButton: false;

Just do

buttons: false;

Guides

Solution 3

You need to set showConfirmButton:false in your configuration.

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showConfirmButton:false,
  confirmButtonText: 'Yes, delete it!'
})

Here's the fiddle

Solution 4

This works for me: $(".confirm").attr('disabled', 'disabled');

My function:

function DeleteConfirm(c){
  swal({   
            title: "Want to delete this item?",   
            text: "You will not be able to undo this action!",   
            type: "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            closeOnConfirm: false 
        }, function(){ 
          $(".confirm").attr('disabled', 'disabled'); 

        });
}

Solution 5

swal({

    title: "Success",
    text: "Permissions assigned Successfully",
    icon: "success",
    closeOnClickOutside: false,
})

Use closeOnClickOutside: false, It works for me.

View more solutions