Display Bootstrap Warning, Info, Success and Error Alert on center of Screen using CSS

Last Reply 27 days ago By dharmendr

Posted 27 days ago

Hi All,

 With reference to below code it is possible to show bootstrap alert center of the screen or middle of the screen over the content just like Ajax modal pop-up.

Create message box in MasterPage to access in child page in ASP.Net

You are viewing reply posted by: dharmendr 27 days ago.
Posted 27 days ago

Hi Amol111,

Check this example. Now please take its reference and correct your code.

HTML

Master Page

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site1.master.cs" Inherits="Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function ShowMessage(message, messagetype) {
            var cssclass;
            switch (messagetype) {
                case 'Success':
                    cssclass = 'alert-success'
                    break;
                case 'Error':
                    cssclass = 'alert-danger'
                    break;
                case 'Warning':
                    cssclass = 'alert-warning'
                    break;
                default:
                    cssclass = 'alert-info'
            }
            $('body').append('<div id="alert_div" style="margin: 0;position: absolute;top: 50%;left: 10%;-ms-transform: translateY(-50%);transform: translateY(-50%);display: none;width: 80%" class="alert fade in ' + cssclass + ' text-center"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>' + messagetype + '!</strong> <span>' + message + '</span></div>');
        }         
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Default Page

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpPanel" runat="server">
        <ContentTemplate>
            &nbsp;&nbsp;<asp:Button ID="btnSucess" runat="server" Text="Sucess" CssClass="btn btn-success" />
            &nbsp;&nbsp;<asp:Button ID="btnError" runat="server" Text="Error" CssClass="btn btn-danger" />
            &nbsp;&nbsp;<asp:Button ID="btnWarning" runat="server" Text="Warning" CssClass="btn btn-warning" />
            &nbsp;&nbsp;<asp:Button ID="btnInfo" runat="server" Text="Info" CssClass="btn btn-info" />
            <br />
        </ContentTemplate>
    </asp:UpdatePanel>
    <script type="text/javascript">
        $(function () {
            ButtonclickEvent();
        });
        function ButtonclickEvent() {
            $('#alert_div').show()
            $("[id*=btnSucess]").on("click", function () {
                ShowMessage("Record submitted successfully", "Success");
            });
            $("[id*=btnError]").on("click", function () {
                ShowMessage("A problem has occurred while submitting data", "Error");
            });

            $("[id*=btnWarning]").on("click", function () {
                ShowMessage("A problem has occurred while submitting data", "Warning");
            });

            $("[id*=btnInfo]").on("click", function () {
                ShowMessage("Please verify your data before submitting", "Info");
            });
        }
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    ButtonclickEvent();
                }
            });
        };
    </script>
</asp:Content>

Screenshot