Modal detailsview

Simple tip, this,

if you're displaying an asp.net DetailsView on your aspx-page, you'll perhaps consider showing it with a modal-background so as to bring focus on it.

This is easily implemented by showing a hitherto hidden panel on the page. Here's the mark-up for that - put it at the very top of the page:




test



Then, in the code-behind code which shows the DetailsView, you'll include a bit of javascript (using Jquery here, but you don't have to) to show the hidden div:



newLanguageDetailsView.ChangeMode(DetailsViewMode.Insert);
detailsPanel.Visible = true;

System.Text.StringBuilder sbScript = new System.Text.StringBuilder("");

sbScript.Append("");

ScriptManager.RegisterStartupScript(this, this.GetType(), "@@@@MyPopUpScrip1t", sbScript.ToString(), false);



The only thing you'll need to remember to do is to add css to your DetailsView, to position it and add a z-index higher than the modalBackground, so it'll be presented above the gray full-screen background. So add this as the css-class attribute value for your DetailsView:

.zindexedDetailsview {
z-index: 100;
position: relative;
}


That's all there is to it. All other solutions I've seen include the Ajax framework and specifically the use of the ModalPopupExtender, so here's a lighter weighted alterantive.

Works for me with VS2012, .net 4.5, Jquery 1.8.3. Cheers!