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

Last Reply 7 months ago By dharmendr

Posted 7 months ago

I have refered the below article to show the alert message in 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

Posted 7 months ago Modified on 7 months ago

Hi Waghmare,

Use the below script.


Master Page

<html xmlns="">
<head runat="server">
    <link rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        function ShowMessage(message, messagetype) {
            var cssclass;
            switch (messagetype) {
                case 'Success':
                    cssclass = 'alert-success'
                case 'Error':
                    cssclass = 'alert-danger'
                case 'Warning':
                    cssclass = 'alert-warning'
                    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>');
    <asp:ContentPlaceHolder ID="head" runat="server">
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

Content Page

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <div style="overflow-x: auto; height: 500px;">
    <asp:UpdatePanel ID="UpPanel" runat="server">
            &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 />
    <br /><br /><br />
    <script type="text/javascript">
        $(function () {
        function ButtonclickEvent() {
            $("[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) {