ASPX Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style type="text/css"> .messagealert { width: 100%; position: fixed; top:0px; 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' } $('#alert_container').append('<div id="alert_div" style="margin: 0 0.5%; -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>'); setTimeout(function () { $("#alert_div").fadeTo(2000, 500).slideUp(500, function () { $("#alert_div").remove(); }); }, 5000); //5000=5 seconds } </script> </head> <body> <form id="form1" runat="server"> <div> <div class="messagealert" id="alert_container"> </div> <div style="margin-top: 100px; text-align:center;"> <asp:Button ID="btnSuccess" runat="server" Text="Submit" CssClass="btn btn-success" OnClick="btnSuccess_Click" /> <asp:Button ID="btnDanger" runat="server" Text="Danger" CssClass="btn btn-danger" OnClick="btnDanger_Click" /> <asp:Button ID="btnWarning" runat="server" Text="Warning" CssClass="btn btn-warning" OnClick="btnWarning_Click" /> <asp:Button ID="btnInfo" runat="server" Text="Info" CssClass="btn btn-info" OnClick="btnInfo_Click" /> </div> </div> </form> </body> </html>
Code Behind:-
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { public enum MessageType { Success, Error, Info, Warning }; protected void Page_Load(object sender, EventArgs e) { } protected void ShowMessage(string Message, MessageType type) { ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + Message + "','" + type + "');", true); } protected void btnSuccess_Click(object sender, EventArgs e) { ShowMessage("Record submitted successfully", MessageType.Success); } protected void btnDanger_Click(object sender, EventArgs e) { ShowMessage("A problem has occurred while submitting data", MessageType.Error); } protected void btnWarning_Click(object sender, EventArgs e) { ShowMessage("There was a problem with your internet connection", MessageType.Warning); } protected void btnInfo_Click(object sender, EventArgs e) { ShowMessage("Please verify your data before submitting", MessageType.Info); } }
Output Screenshot:-
(Visited 25 times, 1 visits today)