Minimal Modal Dialog Box Plugin with jQuery - Dialogbox

Dialogbox is a simple yet customizable jQuery plugin to create modal dialogs for alert, confirm, prompt actions and normal, success, warning, error messages.

How to use it:

1. Load the jQuery Dialogbox plugin's CSS in your document's head section.

<link href="jquery.dialogbox-1.0.css" rel="stylesheet">

2. Load jQuery library and the jQuery Dialogbox plugin's script at the bottom of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.dialogbox-1.0.js"></script>

3. Create notification messages with the dialog box plugin.

$('body').dialogbox({

  // normal, succes, warning, error, 
  type:"normal",

  // dialog box title
  title:"Message",

  // dialog box body
  message:"It's a message!"
  
});

4. Create a yes/no confirm dialog box.

$('body').dialogbox({

  // yes/no, ok/cancel, retry/ignore/abort
  type:"yes/no",
  title:"Title",
  message:"It's a message!"},function($btn){
    if($btn == "yes") {
      $('body').dialogbox({
        type:"normal",
        title:"Result",
        message:"You pressed: Yes"
      });
    }
    else if($btn == "no") {
      $('body').dialogbox({
        type:"normal",
        title:"Result",
        message:"You pressed: No"
    });
    }
    else if($btn == "close") {
      $('body').dialogbox({
        type:"normal",
        title:"Result",
        message:"You pressed: Close"
      });
    }
    
});

5. Create a select prompt dialog box.

$('body').dialogbox({

  // text, select
  type:"select",
  title:"Text Prompt",
  message:"Yourquestion...",
  options:"Opt1,Opt2,Opt3"},function($btn,$ans){
    if($btn == "close") {
      $('body').dialogbox({
        type:"normal",
        title:"Result",
        message:"You pressed: Close"
      });
    }
    else if($btn == "ok") {
      $('body').dialogbox({
        type:"normal",
        title:"Result",
        message:"You entered: " + $ans
      });
    }
});

6. All the default options.

type: 'normal',
title: 'Message',
message: 'WOW! It\'s a message!',
direction: 'ltr',
placeholder: null,
options: '',
splitter: ','

Change log:

v1.1 (2015-03-06)

• update & rename

 

---

This awesome jQuery plugin is developed by afraware. For more Advanced Usages, please check the demo page or visit the official website.