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)
{
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>';
$( "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);
}
- 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. - I have used
Font-awesome
in <i class="fa fa-envelope-o"></i>
- 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
- 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)
.dialogbck
{
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1050;
background-color: rgba(0,0,0,0.3);
outline: 0;
}
.dialog
{
width:40%;
margin: auto;
margin-top: 5%;
}
.dialogHeader
{
font-weight: bold;
font-size:14px;
}
.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>
<!--
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<!--
<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.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.