How to display confirm message box using javascript in asp .net with example

3 Comments | 4218 Views | Post by: Admin | Tags: display confirm message box using javascript in asp .net with example, display confirm message box ,display confirm message box using javascript


Tutorial : Learn to display confirm message box using javascript in asp .net with example


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


Post Comments

if you have some suggestion, question, request on How to display confirm message box using javascript in asp .net with example.

Please use the comment box to express your views.

 

Comments:

loading...