Modalpop larger than browser window

I am having a problem with a modal popup that is larger than the browser window. The modal popup contains a gridview, and can be large. I cannot figure out a way to scroll using the browswers scrollbars. I just noticed the Modal popup on this ASP.NET site to submit source code, and thought that would be perfect. Can anyone help me get started implementing a modal such as that?

Thanks

you can set the width & height of the Panel that you are using for popup.

Eg. <asp:Panel id="panelpopup" runat="Server" CSSClass="modalPopup" Width="600px" Height="400px" />

Thanks for the reply.

It appears I am still having a few issues. One is that regardless of what sizes I specify, if results in the gridview don't have enough room, it will automatically make it big enough to fit it in, but the ModalPoppup doesn't grow with it. It seems like the size of the panel would grow with the data inside of it, but for some reason the data will flow out of the ModalPopup. Also, if it returns too much information, or if a user makes their browser window smaller than the size of the popup, they cannot scroll to see it all. I can scroll the page below the popup, but the popup always recenters itself.

Does anyone have a solution for this?

modalpopup - screen in back isnt being disabled

Can someone tell me what is wrong with my code below. when modalpop screen comes up, the screen in the back isn't being disabled. Plz help

<asp:Table ID="TableAdd" runat="server" Width="568px">
<asp:TableRow ID="TableRow90" runat="server">
<asp:TableCell ID="TableCell96" Width="50px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCel97" Width="120px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCell98" Width="50px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCel200" Width="120px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCell91" Width="50px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCell93" Width="120px" runat="server"><asp:Button ID="Insertbutton" runat="server" Text="Insert Additional Detail Type" /></asp:TableCell>
<asp:TableCell ID="TableCell92" Width="50px" runat="server"></asp:TableCell>
</asp:TableRow>
</asp:Table>

<!--Modal Screen to Insert Allocation Detail records !-->

<asp:Panel ID="Panel1" runat="server" Style="display: none" BackColor=white>

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:DetailsView ID="DetailsView2" runat="server"
AutoGenerateRows="False"
datakeynames="tran_id,tran_fk"
DataSourceID="Allocation"
DefaultMode="Insert"
HeaderText="Add a New Detail Allocation Info" Font-Bold="True">
<Fields>

<asp:TemplateField HeaderText="Type:">
<ItemTemplate>
<asp:DropDownList id="AddType" DataSourceID="TypeSource" Runat="Server"
DataTextField="tran_desc" DataValueField="tran_pk" SelectedValue='<%# Bind("tran_pk") %>'/>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Amount:">
<ItemTemplate>
<asp:Label ID="amount" Text='<%# Eval("amount") %>' Runat="Server" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="amount" runat="server" Text='<%# Bind("amount") %>' ></asp:TextBox>
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"
TargetControlID="amount" FilterType="Custom, Numbers" ValidChars="." />
</EditItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Date:" ItemStyle-Width=125 >
<ItemTemplate>
<asp:Label ID="trandate" Text='<%# Eval("trandate") %>' Runat="Server" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="trandate" runat="server" Text='<%# Bind("trandate") %>' Width=75></asp:TextBox>
<asp:ImageButton ID="ImgBntCalc" runat="server" ImageUrl="~/images/Calendar_scheduleHS.png" CausesValidation="False" />
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender5" runat="server"
TargetControlID="trandate"
Mask="99/99/9999"
MessageValidatorTip="true"
CultureName="en-US"
OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError"
MaskType="Date"
DisplayMoney="Left"
AcceptNegative="Left"
ErrorTooltipEnabled="True" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" Format="MM/dd/yyyy" TargetControlID="trandate" PopupButtonID="ImgBntCalc" />
</EditItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
<EditItemTemplate>
<asp:Button ID="BtnInsert" CommandName="Insert" Text="Insert" Runat="Server"/>
</EditItemTemplate>
</asp:TemplateField>
</Fields>
<HeaderStyle Font-Bold="True" BackColor="Silver" HorizontalAlign="Center" />
</asp:DetailsView>
</ContentTemplate>

</asp:UpdatePanel>

<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="Close" />
</p>

</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="Insertbutton"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
DropShadow="true">
</ajaxToolkit:ModalPopupExtender>

this doesnt happen automatically...you need to manually disable the other stuff.

Are you able to point me in the right direction on how to do that? I'm looking at the sampleWebsite and the video and I have no idea, besides in the style, on where they gray out the background page

just as you said... in styles.

What I've done is wrap it all in a container that I set to Enabled=False when they click the button/link/etc that causes the Popup

I have anexample of making a modal UpdateProgress. You should be able to use similar styles for the BackgroundCssClass as I do in the#progressBackgroundFilterexample

For example:

.modalBackground{
background-color:#000;
filter:alpha(opacity=50);
opacity:0.5;
}

-Damien

thank you guys for your help. I'm allset