JavaScript Alert Message Dialog Box

Category > JQUERY || Published on : Thursday, February 11, 2016 || Views: 9530 || 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