Refer the below sample code and implement it as per your code logic.
MasterPage.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/jscript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/jscript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<style type="text/css">
.message
{
width: 100%;
position: fixed;
top: 50px;
z-index: 100000;
padding: 0;
font-size: 15px;
}
</style>
<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 10%; -webkit-box-shadow: 3px 4px 6px #999;" class="alert fade in ' + cssclass + '"><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.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.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">
<br />
<asp:ScriptManager 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 () {
//Call on Page Load
ButtonclickEvent();
});
// Created common 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) {
//Call on UpdatePanel’s Asynchronous request or Partial PostBack
ButtonclickEvent();
}
});
};
</script>
<br />
</asp:Content>
Screenshot
