JavaScript Alert Message Dialog Box with Dynamic Content
How to display confirm message box using javascript in asp .net
In the previous post I explained about How to validate html form elements in JavaScript? In this post I will show you how to create a customized interactive message box using java script code and Css. Find the source code below:-
<%@ 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 - in Web Application</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: #FFFFFF;
}
.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();">Click Me ..</a>
</div>
</form>
</body>
</html>
Download the source code click here
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!
JavaScript Alert Message Dialog Box with Dynamic Content
Reviewed by Ravi Kumar
on
12:34 PM
Rating:
Reviewed by Ravi Kumar
on
12:34 PM
Rating:
No comments: