by John Avis | July 6, 2017 | Bootstrap ASP.NET Web Forms
.modal-static-backdrop {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background:#000;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:2000;
}
.modal-static {
bottom: auto;
display:block !important;
position:absolute;
z-index:2001;
}
<asp:PlaceHolder ID="ModalPlaceHolder" runat="server" Visible="false">
<div class="modal-static-backdrop"></div>
<div class="modal modal-static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<asp:LinkButton ID="btnModalCloseHeader" runat="server" CssClass="close" OnClick="btnModalClose_Click"><span aria-hidden="true">×</span></asp:LinkButton>
<h4 class="modal-title">Sample Modal</h4>
</div>
<div class="modal-body">
<p>My modal content</p>
</div>
<div class="modal-footer">
<asp:LinkButton ID="btnModalCloseFooter" runat="server" CssClass="btn btn-primary" OnClick="btnModalClose_Click" Text="Close"></asp:LinkButton>
</div>
</div>
</div>
</div>
</asp:PlaceHolder>
ModalPlaceHolder.Visible = true; //or false to hide it
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "UpdatePanel1StartupScript", "setTimeout('window.scrollTo(0,0)', 0);", true);
by John Avis | February 20, 2019
I was recently doing some work on a website which has a mixture of older Classic ASP pages and ASP.NET Web Forms pages and ran into problems with custom error pages.
by John Avis | January 16, 2019
This sample lends itself to an ecommerce website.
by John Avis | December 20, 2018
I recently needed a simple Bootstrap 4 template with side-navigation so came up with the following template.
Comments
by Anonymous | January 4, 2018
Awesome!
Reply
by Wilhelmina | November 22, 2018
Thank you, I've used your code and its working fine. However, when I integrated the bootstrap datepicker inside the modal, it is not working the datepicker does not show.
I have tried setting the z-index of the datepicker to a higher value than the modal, yet it still does not work. (see below)
datepicker {
z-index: 2002 !important;
}
If it's not too much could you please check what is causing this issue?
Note: I have tested the datepicker on a bootstrap modal and it is working fine.
Reply
by John | November 22, 2018
Hi Wilhelmina.
Can you give me a link to exactly which date picker you are using?
Have you got your non working page somewhere online where I can see it and experiment?
In your CSS in your comment you have only got "datepicker", not ".datepicker" (with a dot). Could that be the problem?
Reply
by Jon Smith | November 27, 2018
Is there a work around so that the modal does not display at the top of the page. One of my requirements is that the web page maintains scroll position.
Reply
by Jon Smith | November 27, 2018
I found a work around so that you don't have to scroll to the top of the page to see the modal. It's based on stack overflow article. Spam prevention won't allow me to post the link but you can find it by googling:
center div in the middle of the screen - even when page is scrolled up/down
Step 1 - Add an ID to the second div in the modal
<div id="modalPopup" class="modal modal-static">
Step 2 - Add the following styles:
<style type="text/css">
html, body{ min-height: 100%; }
#modalPopup{ height: 100%; left: 0; position: fixed; top: 0; width: 100%; }
#modalPopup .container{ height: 60%; left: 50%; position: absolute; top: 50%; z-index: 10; width: 60%; }
#modalPopup .container .text{ background: #fff; height: 100%; left: -50%; position: absolute; top: -50%; width: 100%; }
#modalPopup .bg{ background: rgba(0,0,0,0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
</style>
Reply
by John | November 27, 2018
Hi Jon. Thanks for the comment. I did try your changes and it works well... Except if the modal content is too big to fit on the screen. Then there is no way of scrolling to see the rest of the modal. This might not happen if you are only dealing with small dialog/confirmation boxes, but anything larger could be a problem, particularly on mobile devices.
Reply
by John | November 27, 2018
Jon, I was just experimenting a bit further with your changes. To accommodate modal-body content that won't fit on screen it is possible to add a vertical scrollbar to modal-body with a few CSS additions:
#modalPopup .modal-content { height:calc(100vh - 3.5rem); }
#modalPopup .modal-header, #modalPopup .modal-footer { flex:0 0 auto; }
#modalPopup .modal-body { overflow-y:scroll; }
I haven't done a lot of testing but this seems worth investigating if you may have content that might not fit on screen.
Reply