jQuery Plugin to replace Javascript’s window.alert(), window.confirm() and window.prompt() functions

by Posted on

Today I am going to share awesome jQuery Plugin to replace Javascript’s window.alert(), window.confirm() and window.prompt() functions. This popup plugin enables you to create alert / confirm / prompt dialog boxes with custom styles & animations.
jquery-popup

Features

  • Substitutes Javascript’s window.alert(), window.confirm() and window.prompt() functions
  • Implements jQuery Promise interface
  • Customizable buttons and inputs
  • Flexible message-queue
  • Fully CSS customizable



Libraries

Include jQuery library with plugins JS+CSS library.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/messagebox.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/messagebox.min.js"></script>

HTML

Created sample button for all types of popup buttons.

<button class="btn btn-danger demo-1">Alert Box</button>
<button class="btn btn-primary demo-2">Confirm Box</button>
<button class="btn btn-warning demo-3">Prompt Box</button>
<button class="btn btn-info demo-4">Custom Dialog</button>



JS

Here is the list of sample function which can use to display different different types of popup.

<script>
$(document).ready(function(){
$.MessageBox("A plain MessageBox can replace Javascript's window.alert(), and it looks definitely better...");
$( ".demo-1" ).click(function() {
  $.MessageBox("Replace the Javascript's window.alert() functions");
});
$( ".demo-2" ).click(function() {
  $.MessageBox({
    buttonDone  : "Yes",
    buttonFail  : "No",
    message     : "Are You Sure?"
}).done(function(){
    $.MessageBox("You clicked Yes");
}).fail(function(){
    $.MessageBox("You clicked No");
});
});
$( ".demo-3" ).click(function() {
  $.MessageBox({
    input    : true,
    message  : "What's your name?"
}).done(function(data){
    if ($.trim(data)) {
        $.MessageBox("Hi <b>"+data+"</b>!");
    } else {
        $.MessageBox("You are shy, aren't you?");
    }
});
});
$( ".demo-4" ).click(function() {
  $.MessageBox({
    buttonDone  : "OK",
    buttonFail  : "Cancel",
    message     : "You can type whatever you like",
    input       : true,
    speed       : 1000
}).done(function(){
    $.MessageBox("Well done!");
}).fail(function(){
    $.MessageBox("You rebel!");
});
});
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by gasparesganga. Visit their official github repository for more information and follow for future updates.


Published by admin