sweetalert2 / sweetalert2 Goto Github PK

✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦

Home Page: https://sweetalert2.github.io

License: MIT License

CSS 0.07% JavaScript 86.61% HTML 0.30% TypeScript 0.22% Shell 0.12% SCSS 12.68%

sweetalert alert popup prompt dialog toast notifications wai-aria accessible confirm

sweetalert2's Introduction

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement
for JavaScript's popup boxes. Zero dependencies.

Installation | Usage | Examples | Recipe gallery | Themes | React | Angular

💰 Get $200 in free credits with DigitalOcean!

Important

As a consequence of the illegal war in Ukraine, the behavior of this repository and related npm package sweetalert2 is different for .ru, .su, .by, and .рф domain zones.

Including this software in any domain in .ru, .su, .by, and .рф domain zones will block the website navigation and play the national anthem of Ukraine.

This behavior is classified as protestware and this project is listed in GitHub Advisory Database and Snyk Vulnerability DB.

NSFW Sponsors

Become a NSFW sponsor

Best Blowjob Machines

female torso sex doll

STC

Support and Donations

Has SweetAlert2 helped you create a fantastic application? You can show your support via GitHub Sponsors

sweetalert2's People

Contributors

Stargazers

Watchers

Forkers

limon-brodyaga sontan cfstras inboxhealth eking jaideepchauhan diegocoy unjavascripter daguiheso rafaelbecks aman-kr mcuznz toadkicker coot superseb92 gsouf teknosains dubbe podgorski widget128 nerdmed gaoninggn yigitozkavci chrisemoulton leandrocanabarro daengdoang 0ups marcbalaban xwiz rodrigomz kplaricos fgarridosomax calebdre praveenscience canigit stevenspiel callmeniko toby1991 webanvar bkoplin lutisto willbarkoff devsuitup mehmetatabey zkrhm rojasmichael olitomas tonkpils bryanjamesmiller yeomann mbarrerar g0ral hucxley leo42i ngothanhtung jayelkaake johnulist adrianneg 5umu bugatino piterskiy kambaa omidkh68 carter-thaxton deepakmehra10 srdjanmitrovic joshuabremer 4141done yaroslav4167 ymxz majkelo dewoweb ebuckley kikesan cube3power zhnan811 nuwanchamara ramchanty frankiyu joshuastewart-durban simo9000 terrydash zzish changeleon mardoksp birjj bruce-yangs altras rizwanzaheer erbelair happy-ferret zgmn sohjsolwin gkio edward01 zlienqwe dhobbs84 oswaldb youyi1314 doness

sweetalert2's Issues

No value returned from seetalert2, undefined

Let's say I have this code:

Confirm function

function confirmFn() {
return  swal({
            title: 'Confirmation',
            html: ' Are you sure? ',
            type: 'warning',
            showCancelButton: true,
            closeOnConfirm: true,
            closeOnCancel: true
        }, function (isConfirm) {
            if (isConfirm) {
                return true;
            } else {
                return false;
            }
        });
}

If you call the function, the return value should be true or false

var reternedValue = confirmFn() ;

alert(reternedValue);  // undefined

Then sweetalert popups correctly but it doesn't hold the script waiting for the user's action, confirm or cancel.

php redirect after swal

I'm trying to set sweetalert2 before automatic redirect on login if the user is not logged, but it appear just a second and redirect start immediately, how can i set to wait user click?

my actual code:

<?php
session_start();
if ($_SESSION[logged] != 'yes') { 
echo '
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="stylesheets/sweetalert2.css">
<script src="javascripts/custom/sweetalert2.min.js"></script>
<script>
$( document ).ready(function() {
    swal("Oops...", "Not logged!", "error");
    document.location.href="/login.html"
});
</script>';
exit; 
}
?>

How to close modal with html inside swal declaration?

Hi,
I want to use html link to close sweet alert 2 modal alert. it is possible?

I have something like this

swal({
title: 'Product added to cart!',
html: 'I want more Checkout ',
timer: 10000,
showConfirmButton: false
});

So when someone click into I want more button the modal should close. Thanks in advance!

Remove inline styling from buttons

I am using bootstrap, but setting confirmButtonClass: 'btn btn-primary', does not change any style.

This is because of some inline styling:

 style="display: inline-block; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214); background-color: rgb(48, 133, 214);"

How can I disable this?

Hello @limonte , i appreciate your work and i have been trying to implement sweetalert2, but unfortunately the alerts do not popup at all in your current versions. I request you to please have a look at the code.
Many thanks!

Ok and Cancel buttons inverted positions

Hello friends,

How do I invert the default position of the buttons ?
I want the OK button to be at the RIGHT side.

Thanks!

Bug:Permanent 'display:none' on hr ( $btnSpacer)

Hi!
If we hide all buttons, we hide the 'hr' markup. After this every alert doesn't have any space between buttons and message. Reason of this is missing 'else' at line 654 : ' if (!params.showConfirmButton && !params.showCancelButton) {
hide($btnSpacer);
}'

Code to test:
sweetAlert({
title: '1',
text: 'Are you sure you want to test?',
closeOnConfirm: false,
animation: "slide-from-top",
},
function (inputValue) {
if (inputValue) {
swal({
title: '2.Processing...',
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
timer:1000
},function(){
setTimeout(function() {
swal('3', 'error', 'error');
}, 1000);

                });
            }});

The second alert hide 'hr'.
The third does't have hr too, but it is necessary.

If we add 'else show($btnSpacer);' the bug is fixed

SweetAlert2 confirm doesn't wait for input on form

I am using SweetAlert2 as a confirm dialog before submitting an HTML Form.
The issue is that it sends the request without waiting for input.

With Sweet Alert 2: JSFiddle

The normal behavior happens when using a standard "Confirm" html control: JSFiddle

Add div to a container div

Hello,

My layout does have a navigation menu and a content area, however sweetalert2 does by default add the alert in the body, not giving me the option to centering it relative to the content area.

Is there a chance you could add something like this?

Thanks

Image upload feature?

I know that this meant to be an alert plugin, but it also has a "input field" feature that I often use.
I needed an image upload in my project and doing it with sweetalert would be nice since it is being used all over my project. If that would be accepted, I am ready to work on it and send a pull request.

SWAL2 cancel event is backwards

New issue Tab key not working after opening two Sweet Alert Modals in a row

As mentioned in t4t5/sweetalert#127. Tab key is screwed up if opening two swal modals in a row.

This t4t5/sweetalert#127 (comment) workaround works.

animation: false not working?

It seems that setting animation: to false has no effect.

The animation need to be disabled because the "success" graphics has artifics. See attachment.

Button Text

Hi, I'm working with Ruby on Rails and Sweet Alert 2, everything is fine. I just have an issue, whenever I try to put an i18n on confirmButtonText and cancelButtonText, text go back to defaults OK and cancel... I18n works fine on title and text.

Any help?

option to be able to scroll alert on mobile phones (and not background)

On mobile phones (small screens) with big alert text, sometime you are simply not able to reach confirm or cancel buttons because you can't scroll the alert, only the background scrolls (FYI I have this problem using bootstrap )
I feel like it would be a great enhancement to have this options, because sometimes you simply can't close the alert, or confirm an action(which in my case prevent normal use of the application)

Call function after timeout

I really miss the function to attach a function when a timer timesout, rather than when a user clicks the ok button.

Instead of making your own clone, you should create pull requests to the original instead

This is not cool, sir

Define image size in width or height only, instead of both width and height

Could be awesome to be able to define the width / height as:

imageWidth: 100px
imageHeight: auto;

ReferenceError: swal is not defined

I just try the example file ( index.html ) in example directory then message appears as above , How to fix it?

Outside click on warning message makes action

In this example (from docs):

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  closeOnConfirm: false
},
function() {
  swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
  );
})

If you click in outside, delete action will be performed. I think, clicking in outside must just close popup message.

Outside click of modal window is NOT returning callback

We can do swal(function(isConfirm) {}); to handle cancel btn click if !isConfirm,

..but what about clicking outside the window? it is neither confirmed nor cancelled

What's the difference between sweetalert and sweetalert2?

I can't seem to find any docs about it. What was your motivation for the fork and how is this different from the original?

$ is not a function when using smoothscroll

Hello,
I have an issue in sweetalert2 that I don't have in sweetalert.

While using both this code :

    $(document).on('click', '.sscroll', function (e) { // Au clic sur un élément
        href = $(this).attr('href');
        nhref = href.charAt(0);
        if (nhref === '#') {
            e.preventDefault();
            $('html,body').animate({
                scrollTop: $(this.hash).offset().top
            }, 1200);
        } else {
            window.location.href = href;
        }
        return false;
    });

Console will return "$ is not a function"
jQuery version is : 1.11.2

Thank you

SHIFT+TAB broken during swal()

Only tab forward works, tab back does nothing. For some reason it completely takes over the khook for tab backwards..

Others experiencing this, reported 9 months ago: http://i.imgur.com/uoeq73h.png

Related: ENTER khook doesn't work either .. have to set some really ugly bindings.

Javascript Callback

It is posible to make a callback when SweetAlert window has been
created? I'm trying to make a SummerNote textarea but it doesn't show. :(

Request: Please provide CDN

I use Sweetalert1 with CDN and work great. I interest to move to Sweetalert2. Please provide CDN

Thanks

Small documentation issue

On this page - https://sweetalert2.github.io/ for A warning message, with a function attached to the "Confirm"-button...

type:'warning"
should be
type:'warning'

swal({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'warning",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnConfirm: false
},
function() {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
);
});

Error in sweetalert2 prevents use with zone.js

Hi, zone.js is used in zones, which is used by Meteor's Kadira for in browser error reporting to a server.

sweetAlert2 has an error, which doesn't seem to bother chrome, but when combined with zone.js prevents the callback from being called.

I tried to explain it here: meteorhacks/zones#85
and here: https://github.com/angular/zone.js/issues/260

Those issues are about zone.js, but this is the root cause:

Error: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
    at TypeError (native)
    at s (https://dashboard-dev.hello.io/packages/patrickml_swal.js?06d775f51a9debdd71fd5de7eb0594d0e94eed1b:32:7559)
    at HTMLButtonElement.p (https://dashboard-dev.hello.io/packages/patrickml_swal.js?06d775f51a9debdd71fd5de7eb0594d0e94eed1b:32:3375)

A way to set global defaults

It would be cool with a way that you could specific defaults for all alerts. For instance, I need to change the default text of the cancelButton to something else, because I'm currently localizing my project. Or maybe I'd like to put a default class to the alerts, without having to specify this class on all alerts.

In other plugins, such as Dropzone.js, they have a built in way to define some globals (illustrated here as well: http://www.dropzonejs.com/#events)

Here you can specify Dropzone like this:

var myDropzone = new Dropzone("div#myId", { url: "/file/post", autoDiscover: false});

Now, if you'd like to turn autoDiscover off by default, on all Dropzone elements, you can simply set below variable:

Dropzone.autoDiscover = false;

So now below code will work as well, having autodiscover off:

var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

If I wish to override the default setting, i.e. set autoDiscover to true again on a specific element, I can simply do:

var myDropzone = new Dropzone("div#myId", { url: "/file/post", autoDiscover: true});

Makes sense?

Support rem units for sizing

I started hacking on supporting rem units instead of pixels for the alert. I realize this could be a potentially risky endeavour, but I feel the payoff would benefit the project long-term. What's your thoughts on supporting dynamic resizing of the alert vs using pixels? I'll send a PR when I'm happy with the results, but I'm interested in knowing if its worth it or keeping my fork specific to the implementation I'm using.

Request: Add on jsDelivr

I use Sweetalert with jsDelivr, but i want to use Sweetalert2, can you add on jsDelivr?

Info of adding: https://github.com/jsdelivr/jsdelivr/blob/master/CONTRIBUTING.md

tks.

How to use javascript AFTER the popup (rather than after button click)?

For example,

I'm making a registration form http://i.imgur.com/zVWLyrB.png

I had to use jq's on() to change the date to jquery ui date. It would be much easier if I could add javascript at the same time this pops up (I can't use it early because sweetalert creates new DOM).

This is also useful for validation events before the button is clicked, such as if username is taken, if password isnt long enough, etc.

Any easy way to use JS/JQ while the message pops up, but BEFORE clicking the button or do I need to keep using jq on() events? I tried adding
'<script>alert('hi');</script>' + //HTML Here
but it didn't seem to work.

timer needs to be reset when 'closeOnConfirm' is set to false

If the alert has a timer set (say n seconds), and 'closeOnConfirm' is set to false, then the second window that appears (after confirm) will get closed if 'n' seconds elapse. This time includes the time spent in deciding confirm or no.

The timer needs to be reset in between for correct/desirable operation.

How do I handle cancel events?

Right now, buttons are disabled, SWAL pops up .. if the user enters input and presses OK, an event triggers that enables the buttons. No problem.

But if a user cancels or presses ESC................. the button is forever disabled. How can I handle cancel event?

Closing alert with JS

With the original sweet alert project, I could say something like the following to close the alert.

swal.close();

This does not seem to be the case with this project and I cannot find documentation and or the code that would do this. Is this available somewhere and I'm just missing it?

Custom icons are very off - needs either padding or margin changes

Cutting off a chunk of the image and is always awkward padding/margins

HTML

With sweetalert2 it's impossible to use a custom HTML as documented.
Compare
https://github.com/t4t5/sweetalert/blob/master/lib/sweet-alert.js#L571
https://github.com/limonte/sweetalert2/blob/master/lib/sweetalert2.js#L548
I will try to make a pull request as soon as I can

Cancel events are left unhandled

How do I handle a cancel event if the user presses ESC or the cancel button?

Sweet alert & bootstrap modal togheter

Hi,

I have a bootstrap modal with lots of inputs in a form. Tabbing through inputs works OK. I have another button on the same page that opens a sweet alert for a confirmation of a delete operation from a table.
Once I open a swal, close it and open again the bootstrap modal tabbing is not working anymore inside the modal. On page refresh i am able again to tab through the modal inputs. I think it has something to do with both sweet alert and bootstrap modal having the same tabindex -1. Using javascript alert confirm for the deletion operation does not interfere with the modal also.

Do any of you have the same issue?

callback function for deleted items

I find myself needing to redirect a page after deleting with ajax and getting a response that it was successful. Here's what my code looks like:

swal({
  title: 'Are you sure?',
  text: 'You will not be able to recover this imaginary file!',
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d44',
  confirmButtonText: 'Yes, delete it!',
  closeOnConfirm: false
}, function() {
  swal.disableButtons();
  setTimeout(function(){
    // The callback doesn't work here
    swal({ title: 'Failed', text: 'The file was not deleted', type: 'error', function(){ window.location.href = '/' } });
  }, 2000);
});

Maxlenght and other attributes on input?

First of all thanks for keeping this nice plugin alive!

So I was wondering if you could add a option to give an array of attributes to an input type, so I can add maxlenght to the input field for example.

I am using this:

title: 'Test', text: 'Enter some text', type: "input", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true

Autofocus confim button on modal open?

Hi,

I've tried sweetalert, bootstrap-sweetalert and now sweetalert2 - when the modal opens, the focus seems to remain on the link/button that triggered it instead of being set to the modal's confirm button. Once I press the tab key, the modal's button is focused but many people won't try the tab key and will reach for their mouse instead.

Is this by design, or am I missing a setting, etc?

Thanks. Jeff.

Enter(return) key reopens a closed alert and disables Enter key for other alerts

I thought this may have been an issue with my configuration, but it's reproducible on the demo page https://sweetalert2.github.io/

After opening an alert, exiting the alert by any means other than using the confirm button (such as clicking on the cancel button, pressing escape, or exiting the alert by clicking outside) will cause pressing the Enter key to reopen the alert.

Get current sweetalert instance

I want to access the current sweetalert instance i have open and depending on what button the user clicks, change some value in the modal.

I cannot see to figure out however how to access the instance, is it possible?

Horizontal rule display is not getting reset.

When you click the confirm button, the horizontal rule above the button gets a style applied to it display: none; if you activate another instance of swal the horizontal rule is still set to display none.

How to handle cancel by clicking outside the window?

I can do swal(function(isAccepted) {}); to handle cancel btn click,

but what about clicking outside the window?

For example, I have a treeview node selected, you click it and it'll ask if you want to launch something --

swal cancel btn, deselects - NP;
swal accept, deselects - NP;

..but click outside (cancel without clicking cancel)..... how do I handle this?

Need another button

Hi,

I'd like to be able to add another button for the simple use case on exit:

Return to editing
Discard Changes and exit
Save and exit

any plans on doing this? I need this functionality so I might be able to do a pr if there is no other way. I'm not too familiar with this library though, so if anybody has any tips on how to do it they would be appreciated.

It might be nice to give the ability to make unlimited buttons too, like this:

customButtons:[{
  name:"My Button",
  onClick:function(){
    //do stuff
  }
}]

Maybe in v3 we could do it like this:

{
  title:"swal",
  buttons:[
    {
       text:"save",
       type:"success",
       onClick:function(){
        //do stuff
       }
    }
  ]
}

swal.setDefaults({
    cancelButtonText: 'Close',
    confirmButtonClass: 'btn btn-primary',
    cancelButtonClass: 'btn btn-secondary',
    buttonsStyling: false
});

But when I call:

    swal({
        title: 'Some message',
        type: 'success',
        timer: timeout,
        showConfirmButton: false,
        showCancelButton: false,
        cancelButtonText: null,
        confirmButtonClass: null,
        cancelButtonClass: null,
    });

The confirm and cancel buttons are still shown