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">×</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>
<asp:Button ID="btnSucess" runat="server" Text="Sucess" CssClass="btn btn-success" />
<asp:Button ID="btnError" runat="server" Text="Error" CssClass="btn btn-danger" />
<asp:Button ID="btnWarning" runat="server" Text="Warning" CssClass="btn btn-warning" />
<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
