Show Modal Background below Bootstrap Alert Box using CSS

Last Reply one year ago By dharmendr

Posted one year ago

Hi All ,

HaPpY NeW YeaR to All.

With reference to below link i have impleted the same.

I want to show black shadow on the screen when bootstrap alert box appears.

I have user below css but it wont work. Please help.

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

background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;


You are viewing reply posted by: dharmendr one year ago.
Posted one year ago

Hi Waghmare,

Refer below sample code.


Master Page

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<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: absolute;top: 0;left: 0;width: 100%;height: 100%;"></span>')
            .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="#" 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

<%@ 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 ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <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 />
    <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) {