<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- This is what you need -->
<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">
<h2>TEST: SweetAlerts in ACTION</h2>
<p>Already submitted by another author
<a href="http://bootsnipp.com/snippets/featured/sweetalert-for-bootstrap">Here</a></p>
<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" >Primary</button>
<button class="btn btn-lg btn-info sweet-11">Info</button>
<button class="btn btn-lg btn-success sweet-12">Success</button>
<button class="btn btn-lg btn-warning sweet-13">Warning</button>
<button class="btn btn-lg btn-danger sweet-14");">Danger</button>
</div>
</div>
</div>
</div>
</div>
/*
Ref: http://www.w3schools.com/jsref/met_document_queryselector.asp
*/
$( document ).ready(function() {
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!'
});
// this will hide all h2 tags.
$("h2").hide();
};
document.querySelector('.sweet-11').onclick = function(){
swal({
title: "Are you sure you want to delete h2 tags?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
$("h2").hide();
$(location).attr('href','http://address.com');
// this works $(location).attr('href','http://address.com');
// ref: http://javarevisited.blogspot.ca/2013/12/how-to-redirect-page-or-url-jQuery-JavaScript-Example.html
});
};
document.querySelector('.sweet-12').onclick = function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
};
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!'
});
};
});
