Show Bootstrap Alert Box with Modal Background at Scroll position in jQuery

Last Reply one month ago By dharmendr

Posted one month ago

I have refered the below article to show the alert message in asp.net c# but I am unable to maintain the page scrollbar position.

As the alert displays in upper side of page when the scrollbar is down the page I want to display the alert message even if the scrollbar is down the page.

Show Modal Background below Bootstrap Alert Box using CSS

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago Modified on one month ago

Hi Waghmare,

Use the below script.

HTML

Master Page

<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('<span id="shadow" style="background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;width: 100%;height: 100%;"></span>')
        .append('<div id="alert_div" style="margin: 0;position: relative;top: 50%;left: 10%;-ms-transform: translateY(-50%);transform: translateY(-50%);display: none;width: 80%;" class="alert fade in '
        + cssclass + ' text-center"><a href="#" onclick="$(\'#shadow\').remove()" 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>

Content Page

<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>
    <div style="overflow-x: auto; height: 500px;">
    </div>
    <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>
    <br /><br /><br />
    <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