<div class="example">
<button id="button1">A basic message</button>
<button id="button2">A title with a text under</button>
<button id="button3">A success message!</button>
<button id="button4">A warning message, with a function attached to the "Confirm"-button...</button>
<button id="button5">... and by passing a parameter, you can execute something else for "Cancel".</button>
</div>
.example button {
float: left;
background-color: #4E3E55;
color: white;
border: none;
box-shadow: none;
font-size: 17px;
font-weight: 500;
font-weight: 600;
border-radius: 3px;
padding: 20px 80px;
margin: 26px 5px 0 5px;
cursor: pointer;
}
.example button:focus{
outline: none;
}
.example button:hover{
background-color: #4E3E5590;
}
.example button:active{
background-color: #8E3E55;
}
document.getElementById('button1').onclick = function(){
swal("Hello World!");
};
document.getElementById('button2').onclick = function(){
swal("Hello World!", "Again...")
};
document.getElementById('button3').onclick = function(){
swal("Nice job!", "You clicked the button!", "success");
};
document.getElementById('button4').onclick = function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!',
closeOnConfirm: false,
//closeOnCancel: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted!", "success");
});
};
document.getElementById('button5').onclick = function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel please!",
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");
}
});
};