Custom/Div based Alert in ASP.NET

The post is about implementing Custom/Div based Alert Messagebox in ASP.NET using jQuery/jQuery UI Dialog plugin. This can be a required thing when you are asked not to use default browser alert box.

You may would like to use jQuery UI Dialog to implement customized Alert/Confirm boxes. This way, you can provide the buttons, messages, title as well as actions that you wanted.

Here with, I have written a small Webform to show a customized Alert box using jQuery UI Dialog:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        function AlertBox(msgtitle, message, controlToFocus) {
            $("#msgDialogAlert").dialog({
                autoOpen: false,
                modal: true,
                title: msgtitle,
                closeOnEscape: true,
                buttons: [{
                    text: "Ok",
                    click: function () {
                        $(this).dialog("close");
                        if (controlToFocus != null)
                            controlToFocus.focus();
                    }
                }],
                close: function () {
                    $("#operationMsgAlert").html("");
                    if (controlToFocus != null)
                        controlToFocus.focus();
                },
                show: { effect: "clip", duration: 200 }
            });
            $("#operationMsgAlert").html(message);
            $("#msgDialogAlert").dialog("open");
        };

        function ShowMessage() {
            AlertBox("This is Title", "And This is the content of the message!", null);
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="msgDialogAlert" style="display: none; text-align: center; vertical-align: central">
            <p id="operationMsgAlert">&nbsp;</p>
        </div>
        <asp:Button Text="Click!" runat="server" OnClientClick="return ShowMessage();" />
    </form>
</body>
</html>

Result will be:

You can have Ok, Yes & No, Ok & Cancel, any combination of button you needed and can write code in click event in above given code snippet. 

Similar to this Alert box, you can use same method to implement Confirm box, Success message box (that just show by itself and then disappears without any action)

Comments

No Comments