ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Show Modal Background below Bootstrap Alert Box using CSS<p>Hi&nbsp;Waghmare,</p> <p>Refer below sample code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <p><strong>Master Page</strong></p> <pre class="brush: html">&lt;%@ Master Language=&#34;C#&#34; AutoEventWireup=&#34;true&#34; CodeFile=&#34;Site1.master.cs&#34; Inherits=&#34;Site1&#34; %&gt; &lt;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&gt; &lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; function ShowMessage(message, messagetype) { var cssclass; switch (messagetype) { case &#39;Success&#39;: cssclass = &#39;alert-success&#39; break; case &#39;Error&#39;: cssclass = &#39;alert-danger&#39; break; case &#39;Warning&#39;: cssclass = &#39;alert-warning&#39; break; default: cssclass = &#39;alert-info&#39; } $(&#39;body&#39;).append(&#39;&lt;span id=&#34;shadow&#34; style=&#34;background: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0;width: 100%;height: 100%;&#34;&gt;&lt;/span&gt;&#39;) .append(&#39;&lt;div id=&#34;alert_div&#34; style=&#34;margin: 0;position: absolute;top: 50%;left: 10%;-ms-transform: translateY(-50%);transform: translateY(-50%);display: none;width: 80%;&#34; class=&#34;alert fade in &#39; + cssclass + &#39; text-center&#34;&gt;&lt;a href=&#34;#&#34; onclick=&#34;$(\&#39;#shadow\&#39;).remove()&#34; class=&#34;close&#34; data-dismiss=&#34;alert&#34; aria-label=&#34;close&#34;&gt;&amp;times;&lt;/a&gt;&lt;strong&gt;&#39; + messagetype + &#39;!&lt;/strong&gt; &lt;span&gt;&#39; + message + &#39;&lt;/span&gt;&lt;/div&gt;&#39;); } &lt;/script&gt; &lt;asp:ContentPlaceHolder ID=&#34;head&#34; runat=&#34;server&#34;&gt; &lt;/asp:ContentPlaceHolder&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;div&gt; &lt;asp:ContentPlaceHolder ID=&#34;ContentPlaceHolder1&#34; runat=&#34;server&#34;&gt; &lt;/asp:ContentPlaceHolder&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p><strong>Content page</strong></p> <pre class="brush: html">&lt;%@ Page Title=&#34;&#34; Language=&#34;C#&#34; MasterPageFile=&#34;~/Site1.master&#34; AutoEventWireup=&#34;true&#34; CodeFile=&#34;Default.aspx.cs&#34; Inherits=&#34;_Default&#34; %&gt; &lt;asp:Content ID=&#34;Content1&#34; ContentPlaceHolderID=&#34;head&#34; runat=&#34;Server&#34;&gt; &lt;/asp:Content&gt; &lt;asp:Content ID=&#34;Content2&#34; ContentPlaceHolderID=&#34;ContentPlaceHolder1&#34; runat=&#34;Server&#34;&gt; &lt;asp:ScriptManager ID=&#34;ScriptManager1&#34; runat=&#34;server&#34;&gt; &lt;/asp:ScriptManager&gt; &lt;asp:UpdatePanel ID=&#34;UpPanel&#34; runat=&#34;server&#34;&gt; &lt;ContentTemplate&gt; &amp;nbsp;&amp;nbsp;&lt;asp:Button ID=&#34;btnSucess&#34; runat=&#34;server&#34; Text=&#34;Sucess&#34; CssClass=&#34;btn btn-success&#34; /&gt; &amp;nbsp;&amp;nbsp;&lt;asp:Button ID=&#34;btnError&#34; runat=&#34;server&#34; Text=&#34;Error&#34; CssClass=&#34;btn btn-danger&#34; /&gt; &amp;nbsp;&amp;nbsp;&lt;asp:Button ID=&#34;btnWarning&#34; runat=&#34;server&#34; Text=&#34;Warning&#34; CssClass=&#34;btn btn-warning&#34; /&gt; &amp;nbsp;&amp;nbsp;&lt;asp:Button ID=&#34;btnInfo&#34; runat=&#34;server&#34; Text=&#34;Info&#34; CssClass=&#34;btn btn-info&#34; /&gt; &lt;br /&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { ButtonclickEvent(); }); function ButtonclickEvent() { $(&#39;#alert_div&#39;).show() $(&#34;[id*=btnSucess]&#34;).on(&#34;click&#34;, function () { ShowMessage(&#34;Record submitted successfully&#34;, &#34;Success&#34;); }); $(&#34;[id*=btnError]&#34;).on(&#34;click&#34;, function () { ShowMessage(&#34;A problem has occurred while submitting data&#34;, &#34;Error&#34;); }); $(&#34;[id*=btnWarning]&#34;).on(&#34;click&#34;, function () { ShowMessage(&#34;A problem has occurred while submitting data&#34;, &#34;Warning&#34;); }); $(&#34;[id*=btnInfo]&#34;).on(&#34;click&#34;, function () { ShowMessage(&#34;Please verify your data before submitting&#34;, &#34;Info&#34;); }); } var prm = Sys.WebForms.PageRequestManager.getInstance(); if (prm != null) { prm.add_endRequest(function (sender, e) { if (sender._postBackSettings.panelsToUpdate != null) { ButtonclickEvent(); } }); }; &lt;/script&gt; &lt;/asp:Content&gt; </pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/p4DWo8H.gif" alt="" width="315" height="213" /></span></strong></p>https://www.aspforums.net:443/Threads/117041/Show-Modal-Background-below-Bootstrap-Alert-Box-using-CSS/https://www.aspforums.net:443/Threads/117041/Show-Modal-Background-below-Bootstrap-Alert-Box-using-CSS/Thu, 03 Jan 2019 23:44:33 GMT