Category >
ASP.NET
|| Published on :
Friday, July 3, 2015 || Views:
7333
||
display confirm message box using javascript in asp .net with example display confirm message box display confirm message box using javascript
In this article, we are going to learn how to display confirm message box using javascript in asp .net with example.
so lets start the coding for display confirm message box using javascript in asp .net with example
Step 1: Create a new website in Visual Studio 2010
Step 2: Add a new asp.net webpage(fileName: Default3.aspx) with the following codes.In below codes we have added some control to achieve the target i.e. display confirm message box using javascript in asp .net with example
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>JavaScript Alert Message Dialog Box - in Web Application</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/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>
so, In this tutorial we have learned how tdisplay confirm message box using javascript in asp .net with example. Happy coding!!!
Download Source Codes