<%--//============= MODAL POPUP Start =============//--%>
<asp:Button ID="btnShowModalPopup" runat="server"
style="display:none" />
<cc1:ModalPopupExtender ID="mpuChangeRequestRecordDetail"
runat="server"
TargetControlID="btnShowModalPopup"
PopupControlID="divPopUp"
BackgroundCssClass="modalBackground"
DropShadow="true">
</cc1:ModalPopupExtender>
<br />
<div id="divPopUp" class="modalPopup" style="display:none;" >
<asp:Panel ID="pnlModalHeader" runat="server"
BackColor="Black" ForeColor="White" Font-Bold="true" Height="15px"
HorizontalAlign="Center" >
Change Request <asp:Label ID="lblChangeRequestID"
runat="server" ></asp:Label> Detail View
</asp:Panel>
<asp:FormView ID="fvwModalChangeRequestRecordDetail"
runat="server" DataKeyNames="ChangeRequestID" CssClass="popupControl" >
<ItemTemplate>
ID: <asp:Label ID="lblChangeRequestID"
runat="server" Text='<%# Eval("ChangeRequestID") %>' ></asp:Label><br /><br />
Originator: <asp:Label ID="lblOriginator"
runat="server" Text='<%# Bind("Originator") %>' ></asp:Label>
Origination Date: <asp:Label ID="lblOriginationDate"
runat="server" Text='<%# Bind("OriginationDate") %>' ></asp:Label><br /><br />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtChangeRequest" runat="server"
Text='<%# Bind("ChangeRequest") %>' ></asp:TextBox>
</EditItemTemplate>
</asp:FormView>
<br />
<asp:Button ID="btnCloseFormView" runat="server"
Text="Close" />
<br />
</div>
<%--//============= MODAL POPUP End =============//--%>
/*== Modal Popup ========================================
*/
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=80);
opacity: 0.8;
}
.modalPopup
{
background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 5px;
width: 600px;
height: 500px;
}
.popupControl
{
background-color: #AAD4FF;
border-style: solid;
border-color: black;
border-width: 2px;
width: 100%;
font-size: 12px;
}
Is there a better way to go about showing the 50 fields without having a
long modal? Can scrollbars (which I donot see a property for) be added? If
so, how?
I am open to thoughts and suggestions regarding this. What is done here
will be used in several other webapps that will be done.
Thank you in advance for your time regarding this.
... John
A scrollable area you can usually make using div and css
Set div's style to "overflow: auto; height: 300px" and see what
happens
Hope this helps