"SweetAlert for Bootstrap"
Bootstrap 3.2.0 Snippet by lipis

<script src="http://lipis.github.io/bootstrap-sweetalert/lib/sweet-alert.js"></script> <link rel="stylesheet" href="http://lipis.github.io/bootstrap-sweetalert/lib/sweet-alert.css"> <div class="container"> <div class="row"> <h1>SweetAlert for Bootstrap</h1> <p class="lead">For more visit the <a href="http://lipis.github.io/bootstrap-sweetalert/">lipis.github.io/bootstrap-sweetalert</a></p> <hr> <h2>Try any of those!</h2> <div class="examples"> <button class="btn btn-lg btn-primary sweet-10" onclick="_gaq.push(['_trackEvent', 'example, 'try', 'Primary']);">Primary</button> <button class="btn btn-lg btn-info sweet-11" onclick="_gaq.push(['_trackEvent', 'example, 'try', 'Info']);">Info</button> <button class="btn btn-lg btn-success sweet-12" onclick="_gaq.push(['_trackEvent', 'example, 'try', 'Success']);">Success</button> <button class="btn btn-lg btn-warning sweet-13" onclick="_gaq.push(['_trackEvent', 'example, 'try', 'Warning']);">Warning</button> <button class="btn btn-lg btn-danger sweet-14" onclick="_gaq.push(['_trackEvent', 'example, 'try', 'Danger']);">Danger</button> </div> </div> </div>
document.querySelector('.sweet-10').onclick = function(){ swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "info", showCancelButton: true, confirmButtonClass: 'btn-primary', confirmButtonText: 'Primary!' }); }; document.querySelector('.sweet-11').onclick = function(){ swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "info", showCancelButton: true, confirmButtonClass: 'btn-info', confirmButtonText: 'Info!' }); }; document.querySelector('.sweet-12').onclick = function(){ swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "success", showCancelButton: true, confirmButtonClass: 'btn-success', confirmButtonText: 'Success!' }); }; document.querySelector('.sweet-13').onclick = function(){ swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonClass: 'btn-warning', confirmButtonText: 'Warning!' }); }; document.querySelector('.sweet-14').onclick = function(){ swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "error", showCancelButton: true, confirmButtonClass: 'btn-danger', confirmButtonText: 'Danger!' }); };

Similar snippets: See More


Comments:

TyrionGraphiste 2014-11-29 13:55:35
    Is this snippet working too with Bootstrap 3.3.1 (the latest version) ?
Jefferson Ciotti 2014-11-30 17:46:10
    Very nice. Congratulations.
Talha Tanveer 2014-12-02 17:32:19
    This is brilliant!
Ian Peter Freeley 2014-12-11 00:55:51
    This is lovley!
Maria del Carmen 2014-12-11 01:18:03
    Great!!!
Brismimo 2015-02-18 22:23:45
    How to use it?
It doesn't function for me
maxsurguy 2015-02-19 17:25:30
    What happens?
allaghi 2015-02-21 10:59:04
    Awesome !
Lloople 2015-02-23 19:53:46
    What about changing the cancelButtonClass? I can't for now :(
Henrique 2015-03-07 21:37:48
    Wow!
Rafael Queiroz 2015-03-11 17:32:08
    awesome
empty 2015-03-25 11:23:07
    how to change this alert to get it on page load? I want to show user that this part of site is only for logged users and I want use alert box to do that.
maxsurguy 2015-04-01 17:11:14
    You can use jQuery's "document ready" function to initialize the swal() function:
Jay 2015-03-27 04:06:49
    What does the sweet-10 mean?
Héritier Kipaka 2015-04-18 21:14:51
    nice
suraj vs 2015-05-12 10:24:16
    nice...
njstat 2016-03-13 02:22:33
    i cant get it to work, any help?
Pierre 2016-09-11 16:53:22
    Little diffcult tu use but now that working :) How can i add an href on the confirm button ?
Maghfirah Suyuti 2017-02-24 05:51:40
    why it doesn't work?

Commenting will be back soon.