Dynamic Dialog Box using Bootstrap and Jquery

• Download source (RAR) - 654 KB

Introduction

At one of my project, I needed a dialog box for confirmation message, error message, to show information or warnings and other things. Bootstrap (CSS Framework from Twitter) has a default Dialog box. But it is not so dynamic. So I have developed a plugin for dialog box that message panel becomes green for any success message, red for any error message, blue for view any formation or warning and a default color for other purpose. I use bootstrap panel classes.

Description

We use the panel structure of bootstrap for dialog message panel.

<div class="panel panel-default">
 <div class="panel-heading ">
  <span><i class="fa fa-envelope-o"></i>  Message Box</span>
  <span style="float: right;"><a href="#"  
  ><i class="fa fa-close" 
  style="font-size: 20px;"></i></a></span>
 </div>
 <div" class="panel-body">
     this is a Message
 </div>
</div>

Instead of panel-default , for success we can use panel-success, for error we can use panel-danger, for information, we can use panel-info and for warning we can use panel-warning. My aim is inject the above panel code in the body dynamically using JQuery or JavaScript. Let's examine the code.

JS Code (Dialog.js)

function OpenDialog(MessageType,message)
{
    // Build the HTML Code
    var htmlString='<div id="DialogPanel" 
    tabindex="-1"  class="dialogbck"  >';
    htmlString=htmlString+'<div class="panel 
    '+GetPanelHeaderStyle(MessageType)+' dialog">';
    htmlString=htmlString+   '<div class="panel-heading dialogHeader">';
    htmlString=htmlString+       '<span><i class="fa fa-envelope-o"></i>  
    Message Box</span>';
    htmlString=htmlString+       '<span style="float: right;"><a href="#" 
    onclick="CloseDialog()" ><i class="fa fa-close" 
    style="font-size: 20px;"></i></a></span>'
    htmlString=htmlString+   '</div>';
    htmlString=htmlString+     '<div id="dialogMessage" 
    class="panel-body dialogBody">';
    htmlString=htmlString+        message;
    htmlString=htmlString+     '</div>';
    htmlString=htmlString+'</div></div>';
    
    // inject the code at body
    $( "body" ).append( htmlString);    
}

function CloseDialog()
        {            
            $(".dialogbck").remove();
            event.preventDefault();            
        }
function GetPanelHeaderStyle(MessageType)
{
    if(MessageType==1) return 'panel-success';
    else if(MessageType==0) return 'panel-danger';
    else if(MessageType==2) return 'panel-warning';
    else if(MessageType==4) return 'panel-info';
    else  return 'panel-default';    
}
function DialogSuccess(message)
{
    OpenDialog(1,message);    
}
function DialogError(message)
{
    OpenDialog(0,message);    
}
function DialogWarning(message)
{
    OpenDialog(2,message);    
}
function DialogInformation(message)
{
    OpenDialog(4,message);    
}
function DialogDefault(message)
{
    OpenDialog(10,message);    
}

1. The dialog consists of a background div and message panel. div id="DialogPanel" is the background div for message panel. It is the parent div of message panel. It has a class named "dialogbck" that creates a light background over the main body. Refer to the CSS part for the definition of the "dialogbck" class.
2. I have used Font-awesome in <i class="fa fa-envelope-o"></i>
3. I consider the following constraints MessageType=1 then Success, MessageType=0 then Error, MessageType=2 then Warning, MessageType=4 then Information, MessageType=10 then Others
4. I have exposed the DialogSuccess.DialogError, DialogWarning, DialogInformation, DialogDefault for Success, Error, Warning, Information and Default action respectively. Each method takes a string parameter named message. It is a string, but you can use HTML tag in the string.

CSS Code (dialog.css)

/* style for Dialog Background */
.dialogbck 
{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1050;
    background-color: rgba(0,0,0,0.3);
    outline: 0;       
}
/* Style for dialog message panel ,You can change width,height,top,left and
   other position by modify this*/
.dialog
{
    width:40%;
    margin: auto;
    margin-top: 5%;
}
/* Dialog Message Panel header Style */
.dialogHeader
{
    font-weight: bold;
    font-size:14px;
}
/* Dialog Message Panel body Style */
.dialogBody
{
    max-height: 70%;
    min-height: 20%;
    overflow-y: auto;
}

HTML Code

<html>
<head>
    <title>Dialog Example</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome.min.css"  rel="stylesheet" type="text/css" />
    <link href="css/dialog.css"  rel="stylesheet" type="text/css" />
    
</head>
<body >
<div style="margin-top:10px;;margin-bottom:10px;">
Click on the buttons 
</div>
<div>
<span>
    <button class="btn btn-success" onclick="DialogSuccess
    ('This is a dialog for Success')"> Success</button>
</span><span class = 
"alert alert-success">Dialog Message panel is Green for any Success </span>
</div>
<br>
<div>
<span>
    <button class="btn btn-danger" onclick="DialogError
    ('This is a Dialog for Error')"> Error</button>
</span><span class = "alert 
alert-danger">Dialog Message panel is Maroon for any Error Message </span>
</div>
<br>
<div>
<span>
    <button class="btn btn-info" onclick="DialogInformation
    ('This is Information Dialog')"> Information</button>
</span><span class = "alert 
alert-info">Dialog Message panel is blue for any Information</span>
</div>
<br>
<div>
<span>
    <button class="btn btn-warning" 
    onclick="DialogWarning('This is Warning Dialog')"> Warning</button>
</span><span class = "alert 
alert-warning">Dialog Message panel is Bootstarps warning color</span>
</div>
<br>
<div>
<span>
    <button class="btn btn-default" 
    onclick="DialogDefault('This is Default Dialog')"> Default </button>
</span><span class = "alert 
alert-default">Dialog Message panel is Bootstarps Default color</span>
</div>    
    <!-- Load JQuery -->
    <script type="text/javascript"  src="js/jquery-1.7.2.min.js" ></script>
    <!-- Load the bootstrap -->
    <script type="text/javascript"  src="js/bootstrap.min.js" ></script>
    
    <script type="text/javascript"  src="js/Dialog.js" ></script>
    
</body>
</html>

Note the onclick event of each button that calls each open dialog function. Remember to include bootstrap, font-awesome, Jquery framework in HTML.

Use with AngularJS/Jquery

You can use this dialog plugin with angularJS/jquery in the following way. Here, I add an example of an angular controller.

var app = angular.module('ExpenseApp', []);
app.controller('LoginController', function ($scope,$http,$window) {
    $scope.Login=function(){
        
        var FormData={
            userCode:$scope.userName,
            password:$scope.userPassCode
        }
        
        $http({
            method:'POST',
            url:'PHPController/Login.php',
            data:FormData,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }
        ).
        success(function(response){
           DialogSuccess('Login Successful');
        }).
        error(function(response){
             DialogError(response);
        }) 
    } 
})

Conclusion

You change the size and position of the massage panel by changing the CSS. If you wish, you can add some animation into CSS also.