Custom prompt, alert boxes using jquery

below code use full to make custom javascript alert, prompt, dialog boxes

resources are

[code language="html"]
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="css/jquery-confirm.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery-confirm.js"></script>
[/code]

working code:

[code language="html"]
<div class="row">
<h2>Basic</h2>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary demo-1">Confirm</button>
<script>
$('.demo-1').on('click', function() {
$.confirm({
title: 'Confirm!',
animation: 'blur',
content: 'Confirm! Confirm! Confirm!'
});
});
</script>
<button type="button" class="btn btn-warning demo-2">Alert</button>
<script type="text/javascript">
$('.demo-2').on('click', function() {
$.alert({
title: 'Alert!',
animation: 'scaley',
content: 'Alert! Alert! Alert!',
confirm: function() {
alert('the user clicked yes');
}
});
});
</script>
<button type="button" class="btn btn-success demo-3">Auto close</button>
<script>
$('.demo-3').on('click', function() {
$.confirm({
title: 'Are you sure?',
content: 'Deleting critical data can result undesired output. Are you sure to continue.',
confirmButton: 'Delete',
confirmButtonClass: 'btn-danger',
autoClose: 'cancel|10000',
icon: 'fa fa-warning',
animation: 'top',
confirm: function() {
alert('delete!');
}
});
});
</script>
<button type="button" class="btn btn-info demo-4">With Font Awesiome Icons</button>
<script>
$('.demo-4').on('click', function() {
$.alert({
icon: 'fa fa-spinner fa-spin',
title: 'Working!',
animation: 'scalex',
content: 'Sit back, we are processing your request. <br>The animated icon is provided by Font-Awesome!'
});
});
</script>
<button type="button" class="btn btn-danger demo-5">Modal Style</button>
<script>
$('.demo-5').on('click', function() {
$.confirm({
backgroundDismiss: true,
animation: 'rotate',
content: 'Click outside the dialog'
});
});
</script>
</div>
</div>
<div class="row">
<h2>4 Themes</h2>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary demo-6">White</button>
<script>
$('.demo-6').on('click', function() {
$.confirm({
title: 'Confirm!',
content: 'Confirm! Confirm! Confirm!',
theme: 'white'
});
});
</script>
<button type="button" class="btn btn-warning demo-7">Black</button>
<script type="text/javascript">
$('.demo-7').on('click', function() {
$.alert({
title: 'Alert!',
content: 'Alert! Alert! Alert!',
theme: 'black',
animation: 'zoom',
confirm: function() {
alert('the user clicked yes');
}
});
});
</script>
<button type="button" class="btn btn-success demo-8">hololight</button>
<script>
$('.demo-8').on('click', function() {
$.confirm({
title: 'Are you sure?',
content: 'Deleting critical data can result undesired output. Are you sure to continue.',
confirmButton: 'Delete',
confirmButtonClass: 'btn-danger',
autoClose: 'cancel|10000',
icon: 'fa fa-warning',
animation: 'left',
theme: 'hololight',
confirm: function() {
alert('delete!');
}
});
});
</script>
<button type="button" class="btn btn-info demo-9">Holodark</button>
<script>
$('.demo-9').on('click', function() {
$.alert({
icon: 'fa fa-spinner fa-spin',
title: 'Working!',
animation: 'opacity',
theme: 'holodark',
content: 'Sit back, we are processing your request. <br>The animated icon is provided by Font-Awesome!'
});
});
</script>

</div>
[/code]