Category >
JQUERY
|| Published on :
Thursday, February 11, 2016 || Views:
10666
||
JavaScript Alert Message Dialog Box
Introduction
Here Pawan Kumar will explain how to JavaScript Alert Message Dialog Box
Description
In previous post I have explained
Upload And Read Excel File into DataSet in Asp.Net using C#,
How to find third highest salary in sql server.,
How to prevent input field from special character,
How to display image on image selection using fileupload control in JQuery.,
Add TextBox Dynamically ASP.Net on Click ASP.Net Button,
Mask UnMask Input Text jQuery Html, and many more articles.
Now I will explain How to JavaScript Alert Message Dialog Box
So follow the steps to learn JavaScript Alert Message Dialog Box
Complete ASPX Web page code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JavaScript Alert Message Dialog Box</title>
<script src="jquery-1.7.2.js"></script>
<script src="jquery-ui.js"></script>
<style type="text/css">
/* custom message */
div.AlertMsg {
width: 302px; /* setting width of div*/
height: 95px; /* setting height of div*/
font: 12px Arial, Helvetica, sans-serif;
color: #ff6a00;
}
.AlertMsg, #AlertMsg {
padding: 20px 40px 40px 40px;
width: 576px;
display: none;
background: url(images/white.png) no-repeat;
}
.AlertClose {
background: url(images/close.png) no-repeat;
position: absolute;
top: -4px;
right: -2px;
width: 35px;
height: 35px;
cursor: pointer;
}
</style>
<script type="text/javascript">
function GenerateAlertMessage(MessageContent) {
// if Alert window open then close previous one and open again..
if (document.getElementById('divMsgAlert') != null)
HideAlert_PU();
var l, t;
l = window.innerWidth / 2 - 382 / 2;
t = window.innerHeight / 2 - 155 / 2;
var DivContent = document.createElement('div');
DivContent.innerHTML = AlertMessage_PU(MessageContent, l, t);
document.body.appendChild(DivContent.firstChild);
}
function AlertMessage_PU(MessageContent, lft, toop) {
var HtmlContent = "<div id ='divMsgAlert' class='AlertMsg'" +
" style='top: " + toop + "px; left: " + lft + "px; position: fixed; z-index: 10000; display: block; background-repeat: no-repeat;'>" +
"<a class='AlertClose' onclick='HideAlert_PU();' ></a>" +
"<p style='margin:0px 0pt;'><strong>Alert message</strong></p><hr style='color:#fff;'/>" +
"<p>" + MessageContent + "</p>";
return HtmlContent;
}
function HideAlert_PU() {
var objPU = document.getElementById('divMsgAlert');
document.body.removeChild(objPU);
}
function ShowAlert() {
GenerateAlertMessage("Hello there!");
DragDiv("#divMsgAlert");
}
function DragDiv(divID) {
$(divID).draggable();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<a onclick="ShowAlert();">Urgent Notification ..</a>
</div>
</form>
</body>
</html>
Conclusion:
So, In this tutorial we have learned, JavaScript Alert Message Dialog Box
Download Source Codes