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'
})
821 questions
8
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
  • 3,774
  • 6
  • 30
  • 55
8
votes
2 answers

How to add close button in SweetAlert pop up

I have used the SweetAlert library for displaying a pop up in my application. This is my code swal({ title: "Are you sure?", text: "Test message?", type: "info", showCancelButton: true, focusConfirm: false, …
Abdul Manaf
  • 4,933
  • 8
  • 51
  • 95
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
  • 7
7
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
  • 52,539
  • 45
  • 182
  • 213
7
votes
2 answers

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
  • 3
  • 11
6
votes
3 answers

How do I change text color in SweetAlert2?

I want to change the 'title' color in SweetAlert2. How can I do that? Thank you in advance function CustomConfirm(title, message, type) { return new Promise((resolve) => { Swal.fire({ title: title, text: message, …
Behrad Nafar
  • 151
  • 1
  • 1
  • 5
6
votes
1 answer

Change icon sweetalert with image

I want to ask how can I change icon image in sweetalert with image? I've tried change icon image in Swal.fire with image from assets, but it's not working Here's the script Swal.fire({ icon: "
Ikram Shabri
  • 557
  • 1
  • 7
  • 19
6
votes
2 answers

How to remove class from button and add custom class in sweetalert2?

I am using sweetalert2 plugin. It works fine, but now i want to remove the button class and add my own class. class=swal2-confirm swal2-styled but i need class=swal2-confirm btn btn-success Any solution appreciated! Swal.fire({ title: 'Are…
user11636668
6
votes
5 answers

Sweet Alert 2 - Link in "confirmButtonText" button

I would like to know how I could put a link in the button that generates the confirmButtonText of Sweet Alert 2. The goal is that when you press that button redirects to a page that removes a record from a database, until now I had it with a simple…
tmrr
  • 73
  • 1
  • 1
  • 6
6
votes
4 answers

SweetAlert2 : Validation required for one of the fields

I am trying to perform validation on one of the fields in the form. Only if the value for that field exists will I be able to invoke the API, if not an error message will be thrown. I tried various examples from SweetAlert2's website. I just want…
Ice_Queen
  • 319
  • 2
  • 5
  • 19
6
votes
1 answer

How can I enable Confirm Button on input in sweet alert 2

I need to disable the confirm button when the user hasn't changed any value in the text box inside the sweet alert and enable it only when the value in the text box has changed but I can't seem to find a way for this. here's my code: swal({ …
Zeeshan Adil
  • 1,937
  • 5
  • 23
  • 42
6
votes
4 answers

SweetAlert2 syntax error on Internet Explorer 11

I'm using the exactly code of SweetAlert2 examples page: swal({ title: 'Are you sure?', text: "You won't be able to revert this!", type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', …
Pedro Antônio
  • 395
  • 1
  • 6
  • 19
5
votes
1 answer

Is it possible to add an entire angular component inside sweet alert 2?

I wanted to know if there is a way to make an angular component open up in a sweet alert box, for example Swal.fire( { HTML: '', }) what I intended was to use the component selector instead of…
Ashen Jayawardena
  • 177
  • 2
  • 15
5
votes
2 answers

Django sweetify

I already read the documentation about https://github.com/Atrox/sweetify-django but I don't understand clearly, I already download and import requirement of sweetify in Django. I just want that if the record is updated the popup message (sweetify)…
user12951147
5
votes
2 answers

How to change the close animation of SweetAlert2?

I'm using SweetAlert2 v8 with animate.css to change the popup animation. The animation I am using is fadeInRight. I'm also using chained alerts and would like to change the closing animation to fadeOutLeft to have the effect of it sliding across the…
BaeFell
  • 640
  • 1
  • 8
  • 28
1
2
3
…
54 55