Stack Overflow
Stack Overflow

Questions tagged [sweetalert2]

A responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes with zero dependencies. Use this tag for questions that involve using this library.

A JavaScript library for generating popup windows. It can be combined with jQuery and it returns promises.

SweetAlert2 page

SweetAlert2 CDN

Stack Overflow Quick Start Snippet

html

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.css">

javascript

Swal.fire({
  title: 'Success!',
  text: 'Swal ready',
  icon: 'success',
  confirmButtonText: 'Cool'
})
649 questions
32
votes
10 answers

Remove "OK" button from sweet alert dialog

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…
Ankush Rishi
  • 2,362
  • 7
  • 21
  • 53
23
votes
2 answers

Angular Material: How to close all mat-dialogs and sweet-alerts on logout

I wanted to close all my dialog's (mat-dialog, bootstrap modals & sweet alerts) on logout in Angular. This is how it was done in AngularJS (version 1.5): function logout() { //hide $mdDialog modal …
hakuna
  • 4,223
  • 8
  • 39
  • 68
20
votes
5 answers

Uncaught (in promise) cancel using SweetAlert2

how do I properly escape the cancel button without throwing an error when using promises? My code throws an alert confirmation with a required checkbox. the code executes as it should to the user, but it throws an error in the console…
Frankenmint
  • 1,304
  • 1
  • 15
  • 29
18
votes
6 answers

How to use sweetalert2 in angular2

Getting this error after npm start in angular project. app/app.component.ts(12,7): error TS2304: Cannot find name 'swal'. app/app.component.ts(21,7): error TS2304: Cannot find name 'swal'. I created an angular project. Inside app.component.ts I…
Akash Rao
  • 890
  • 3
  • 12
  • 23
17
votes
8 answers

More than 2 buttons on sweetalert 2

I have a sweetalert with 2 buttons but I want to have one more button in it. For example, as of now, I have yes and no I want to add one more button say later. Please help. $("#close_account").on("click", function(e) { e.preventDefault(); …
Sukhwinder Sodhi
  • 397
  • 1
  • 3
  • 15
10
votes
6 answers

SweetAlert2 - Bind another event to cancel button?

I am using the latest version of the awesome SweetAlert2 jquery plugin. I have a simple SweetAlert with 2 buttons. 1 button is the confirm button, the other is the cancel button. I am using the html option to add a text input to the alert. When the…
Piet
  • 1,948
  • 5
  • 13
  • 28
9
votes
3 answers

How to listen for when sweet alert closes

I am currently working with sweetalert2 and I am trying to detect when the alert closes. However the DeleteUnsavedImages function is not firing. I thought that assigning the function to the onclose key would work but no luck. swal({ html:…
Hayden Passmore
  • 1,013
  • 2
  • 10
  • 31
8
votes
2 answers

Sweealert2 : Unknown parameter icon

I'm using sweealert2 on my project here's my code header include js via jsdeliver.net Jquery Version : jQuery v3.4.1 Script on…
jharrvis
  • 135
  • 1
  • 1
  • 6
8
votes
1 answer

SweetAlert2, .then() - not updating DOM immediately

THE PROBLEM: I want to redirect a user to another page after clicking OK on the sweet alert, but the user is not redirected until I open up another sweet alert for some reason. You can breakpoint over the code, but nothing happens on the…
Sergnio
  • 138
  • 6
8
votes
7 answers

How can i stop sweetalert scrolling to top after clicking ok?

I'm using sweetalert2 script for when a user posts a comment on my site, It scrolls down to their comment and sweet alert pops up but when they click ok on the sweet alert box it scrolls back upto the top. From what i've been reading i need some…
Exoon
  • 1,379
  • 2
  • 16
  • 31
8
votes
1 answer

Highlighting default text input in sweetAlert

I have a SweetAlert2 that allows text input, and I give it a default value. I'd like this default value to be highlighted when the alert pops up, so that the user can immediately overwrite it if needed. Here's an example: And here is the function…
Edmond
  • 515
  • 1
  • 4
  • 15
7
votes
3 answers

Adding class to sweet alert

I am trying to add an extra class for my modal so I can select it from LESS and turn it's background to transparent. But customClass is not working. Is there any other way to do it. BTW I have already changed a lot with default classes so I need to…
nodeSpret
  • 83
  • 1
  • 1
  • 4
7
votes
3 answers

Using vue component in sweetalert2 content

I have a few plain Sweetalert2 modals in a Vue project. I want to use a custom component inside an alert. For example: my_template.vue And, in…
angrykoala
  • 2,619
  • 4
  • 21
  • 36
7
votes
1 answer

SweetAlert2 add dynamic options to select input

I want to add dynamic options to a SweetAlert2 input type select that looks like this: swal({ title: 'Select Ukraine', input: 'select', inputOptions: { 'SRB': 'Serbia', 'UKR': 'Ukraine', 'HRV': 'Croatia' }, inputPlaceholder: 'Select…
Andrei Zamfir
  • 143
  • 1
  • 2
  • 10
6
votes
2 answers

Using SweetAlert2 with TypeScript, could not find a declaration file for module 'sweetalert2/dist/sweetalert2.js'

I'm migrating one of my projects to TypeScript, in that project SweetAlert2 library is used. The default way to import SweetAlert2 (both JS and CSS) is import Swal from 'sweetalert2' This works fine with TypeScript because there are types in the…
Limon Monte
  • 44,025
  • 43
  • 163
  • 189
1
2 3
…
43 44