Latest

random

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:-

How to Show message Box or Alert Box In ASP .Net

Default.aspx
<%@ 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!

No comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.