Modal Popup and MasterPage

I have several modalpopups on a page that is inside of a MasterPage. The popups work fine, but in IE, the modalpopup opens inside the content area rather than over the entire page. I've searched these forums and have not come up with a solution. Does anyone have any ideas?

http://forums.asp.net/ShowPost.aspx?PostID=1357977 - and maybe vote on the work item to address this.

Modal Popup and WebPages ?

Is there any way to show different webpages inside modal popup or there is some different way ? From different webpages I mean, based on user selection .....

You can use the Dynamic* propertied of the modalpopup to load the content dynamically via a web service. The DynamicContextKey allows you to provide context to the web method that allows you to load different content depending on the value passed in.

You could also programmatically control the display of the modalpopup by using a hidden button as the TargetControlID and calling Show() manually. This allows you to postback and load the content according to the user selection.

Can you please provide an example which I can follow ?

The easiest way I can think of, is using an iframe inside the modal popup and setting it's src before showing popup.

Modal Popup Extender and set focus

I want to set focus on a textbox inside the modal popup extender when it is made visible and I cant for the life of me find an appropriate way to do this!

The popupcontrol is not good because when I add the attribute onclick it gets run before the textbox is made visible!

Any clues?

Cheers

Ross

Sorry, I hate to bump this but could really do with knowing how this can be done.

Ross

You can try registering a clientside startup script that sets focus to the text box. Or you can use the clientside script to open the modal popup and then set the focus.

#1:

page.ClientScript.RegisterStartupScript(me.getType(), "setfocus", "<script language=""javascript"">$get('textbox1').focus();</script>")

#2:

<script language="javascript">

function openModal(){

$find('modalpopupextender1').show();

$get('textbox1').focus();

}

</script>

The ids of the mpe and the textbox will need to be the client rendered id, so if you are using a masterpage or if this is in a user control, you will need to get the clientid from the server or from the output of the page prior to implimenting the code.

Let me know if need anyhting else.

-Alan

the solution in this article worked for me (although i would like to see something much better)

http://www.aspdotnetcodes.com/ModalPopup_Postback.aspx

then you add something similar to the following in the Page_Load event:

btn.Attributes.Add("onclick","fnSetFocus('" + control.ClientID +"');");

hi

go to the following link

http://forums.asp.net/t/1103365.aspx

Modal Popup Extender positioning

Hi

I have a div that centralises the webpage in the browser, this is relative and then I have absolute positioning of graphics inside this, etc.

Problem I have is when adding the ModalPopupExtender, it goes pearshaped, the popup is top left and the modal background is underneath the div container, I have positioned the Extender in various places and sometimes its behind other div's etc...

Whatever I do it wont appear on top, any ideas?

Thanks

R

Have you tried setting the z-index of the modal popupextender TargetControlID (Panel)? set the z-index to 1000 and it should show some difference.

Let me know what happens.

Modal popup extender inside another modal popup extender

Hi all,

I would like to know if this is possible.

Lets say a have a page with modalpopup extender and with update panel.

Onto that modal popup extender I dynamically and with async postback load a UserControlA. That UserControlA also contains modal popup extender and updatepanel, which loads UserControlBdynamically (sort of modal popup inheritance:) )

Is this at least possible in theory? To show another modalpopup in the first modalpopup? Because right now, trigerring modalpopup in UserControlA, modalpopup in page closes

UI would be something like this:

The problem is that i was designing everything with user controls, and then reusing them. And now there is such a problem:)

Hi,

I think it's quite possible theoretically. Please try to implement it as you planed first, and feel free to ask if you meet any problem.

Modal Popup In A Repeater

Hi,

Is there a way to use the ModalPopupExtender from inside a repeater -- each item would have a "delete" link button, and on clicking this, the Panel should be shown? Ive tried everything I can think of, but am not getting anywhere.

Thanks

Joe

Hmmm, I have seen modalpopupextender in the repeater before and it worked fine. Do you get any javascript errors, run-time errors about the extender setup, and how are you wiring the extender to the actual button that will cause the pop up to appear?

The ToolkitTests\Manual\DataboundDynamicPopulate.aspx file that comes with the Toolkit includes a ModalPopup in a repeater (DataList).

Thanks for the heads up. Between this and another article I found (sorry, cant find it right now to give credit), I came up with the solution I was looking for.

My solution is here (for my future reference): http://blog.joelowrance.com/archive/2007/07/10/ajax-modalpopupextender-in-a-repeater.aspx

Modal Popup inside DataList?

Hey guys,
Has anyone ever tried using the Modal Popup Extender inside the DataList? If want to create something similar to Netflix. When you click a button inside a DataList, a modal popup shows up and allows the user to perform certain operations.

I tried doing so but it kept on throwing JavaScript errors. I was just wondering if anyone tried the same.

Thanks
Anup
Hi,

what kind of JavaScript errors are you getting?

I'm interested in this as well, not because I'm getting javascript errors, but because I'm getting multiple modal popup windows when clicking on a single button. I assume that I need to pass an ID to only open a single modal, but I'm not sure how to go about it. Once I'm able to get the number of popups down to one per person (this is a roster page), I'm planning on populating it with database driven content for each person in the list. Does anyone have ideas on how to go about this?

Source code:

1 <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="1"2 RepeatDirection="Horizontal" OnSelectedIndexChanged="DataList1_SelectedIndexChanged">3 <ItemTemplate>4 <div class="membercard2">5 <table width="100%">6 <tr>7 <td valign="top" width="30%" align="center">8 <asp:Image ID="RankImage" runat="server" ImageUrl='<%# "~/images/t_" & Cstr(Eval("Rank")) & ".gif"%>' />9 </td>10 <td width="70%">11 <h3>12 <asp:HyperLink ID="emailLink" runat="server" NavigateUrl='<%# "mailto:" & Cstr( Eval("Email"))%>'13 Text='<%# Cstr(Eval("FirstName")) & " " & """" & Cstr(Eval("Callsign")) & """" & " " &Cstr(Eval("LastName")) %>' />14 </h3>15 <asp:Panel runat="server" ID="panel1" CssClass="actionbuttons" Visible='<%# User.IsInRole("Administrators") %>'>16 <Club:RolloverLink ID="editbtn2" runat="server" Text="Edit" NavigateURL='<%# "Roster_edit.aspx?Action=Edit&PilotID=" & Cstr(Eval("PilotID"))%>' />17 </asp:Panel>18 <asp:Panel runat="server" ID="panel2" CssClass="actionbuttons" Visible='<%# User.IsInRole("Administrators") %>'>19 <Club:RolloverLink ID="RolloverLink1" runat="server" Text="Remove" NavigateURL='<%# "Roster_edit.aspx?Action=Remove&PilotID=" & Cstr(Eval("PilotID"))%>' />20 </asp:Panel>21 <h3>22 <asp:Label ID="TitleLabel" runat="server" Text='<%# Cstr(Eval("Title"))%>' />23 </h3>24 <h3>25    ICQ:26 <asp:Label ID="ICQLabel" runat="server" Text='<%# Cstr(Eval("ICQNum")) %>' />27 </h3>28 <h3>29    Location:30 <asp:Label ID="LocationLabel" runat="server" Text='<%# Cstr(Eval("Location"))%>' />31<br /><br />32<center>33<Club:RolloverLink ID="Button1" runat="server" Text="View Profile" />34</center>353637 </h3>38 <div class="dashedline">39  </div>40 </td>41 </tr>42 <div class="clearcard">43 </div>44 </table>45 </div>46<AjaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server"47TargetControlID="Button1" PopupControlID="ModalPanelOuter1" CancelControlID="Cancel"48OkControlID="OK" DropShadow="False" BackgroundCssClass ="modalBackground" />4950<AjaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"51TargetControlID="ModalPanelInner1" BorderColor="black" Radius="6" />52 </ItemTemplate>5354 </asp:DataList>5556<asp:Panel ID="ModalPanelOuter1" runat="server" CssClass="modalPopupOuter" Style="display:none;">5758 <asp:Panel ID="ModalPanelInner1"59 runat="server" DefaultButton="Ok" ScrollBars="Auto" Height="150px" Width="350px"60 CssClass="modalPopup">Text goes here!<br /><br />61 <asp:Button ID="Ok" runat="server" Style="position: static" Text="Ok" />62 <asp:Button ID="Cancel" runat="server" Style="position: static" Text="Cancel" />63 </asp:Panel>6465</asp:Panel>

Bump. Anyone have ideas?

Here how i did it.

Add the following to the item that will popup the modal popup for each item dataitem:

onclientclick='$find('Details').show();' where Details is the name of your modal popup extender. This will open the popup in javascript.

If you require server processing also wire up the event and in the commandarguments pass the following:

<%# DataBinder.Eval(Container, "ItemIndex") %>

This is pass the current row index to the server side event. From there you can pass the row index to get the row that fired the event.

To avoid postback on clicks make sure the control opening the popup is in an update panel.

The completed item should look similar to this:

<asp:LinkButtonID="CourseLink"runat="server"Text='your button text'

OnClick="TestLink_Click"OnClientClick="$find('[Your modal popup extender id]').show();"

CommandArgument='<%# DataBinder.Eval(Container, "ItemIndex") %>'>

</asp:LinkButton>

One final thing is to remove the modal popup extenders and panel to outside the datalist and bind the targetcontrolid to a hidden dummy button.

Have a look at this article. Hope you might get better idea. the url ishttp://www.aspdotnetcodes.com/Ajax_ModalPopup_PostBack_GridView.aspx

Thanks for the great info! I'll check it out and see if I can figure it out.

Kevin

ameenkpn -

With the exception of the update function (I don't really need to do that right now), that looks exactly like what I'm trying to do. Now, one problem. That article seems to use a mix of C and Javascript (right?), and my app is written in VB (I'm using the clubsite starter kit - YES, I'm new and NOT a developer!). I *think* I have the web service built in my app, but I'm struggling with the DisplayResult section. Is that javascript or C? Does it go in the script section of my page, or somewhere else? I assume I need to convert it to VB, but not sure where to start. Thanks again for the link, I think I'm close on getting it where I want it.

Kevin

The article i suggest you is not mix of C and JavaScript. Its purely C# and JavaScript. There is many tools availbele to convert C# code to VB.NET. Or else you go to microsoft site, they the keyword you want to convert to VB, you can see the equivalent VB code also in the code section.

Please Mark the Post as 'Answered' if you got solution.

I'm still working on this problem. I haven't been able to get it to work yet, and I don't think I'm close yet. I just can't figure out exactly where everything needs to go yet, and would love to see the actual aspx code implemented that he's got in his article. That would definitely help more than seeing code snippets. I saw a comment on the article asking for the same thing, so hopefully someone can supply it!

Kevin

Hi Kevin,

When i read that artcile i dont really find any problem. I try to implement it the same way it explained. It works well for me. Where is your problem in implementing the code snippet? hope atleast i can help you.

Thanks

The problem is that I really have no idea what I'm doing. If you could take a look at my page and see where I'm missing it, that would be helpful. I've uploaded it to my site, you can grab it here: http://www.308thvfs.com/files/roster_view.zip

That contains the page that I'm attempting to add the modal to, as well as the web service. Again, I don't want to do the update talked about in the article, I'm just trying to get the modal to popup "read only" to view a database field associated with the selected member. I'm not exactly clear what goes where, that's where I'm having the trouble. For example, you see that I don't have the "function DisplayResult" called anywhere, because I really have no idea where to put it.

My site is built in VB, and I've gotten a C# to VB converter tool (from herehttp://labs.developerfusion.co.uk/convert/csharp-to-vb.aspx).

Any help you can give would be appreciated. I'm NOT a developer, I'm just trying to use starter kits and code samples to make my way through this site, and trying to pick things up as I go...

Thanks,
Kevin

Modal Popup not working in page inside Master Page

I followed the how-to example to create a page with modal popup and it works fine. However when put the same code in a page which is inside a master page, it seems not able to pick up the class attributes from style sheet which is located in root of the web. Is there any workarounds for this?

SLICan:

I followed the how-to example to create a page with modal popup and it works fine. However when put the same code in a page which is inside a master page, it seems not able to pick up the class attributes from style sheet which is located in root of the web. Is there any workarounds for this?

A liitle bit better now, after I made a copy of the style sheet from root to the folder where the aspx page resides, now I can see the requesting page dim-out and the pop up appears on the screen under two different scenarios:

(1) If I used default value(-1) for X, Y, left bottom portion of the pop up appears on the top right corner of the requesting page and button inside the popup is clickable.

(2) If I changed value of X, Y to something else, entire pop up appears in the center of the screen but is dim-out too. In addtion, if I specified drop shadow to true, then the shadow appears on the top right corner of the screen.

Can anyone help?

SLICan:

SLICan:

I followed the how-to example to create a page with modal popup and it works fine. However when put the same code in a page which is inside a master page, it seems not able to pick up the class attributes from style sheet which is located in root of the web. Is there any workarounds for this?

A liitle bit better now, after I made a copy of the style sheet from root to the folder where the aspx page resides, now I can see the requesting page dim-out and the pop up appears on the screen under two different scenarios:

(1) If I used default value(-1) for X, Y, left bottom portion of the pop up appears on the top right corner of the requesting page and button inside the popup is clickable.

(2) If I changed value of X, Y to something else, entire pop up appears in the center of the screen but is dim-out too. In addtion, if I specified drop shadow to true, then the shadow appears on the top right corner of the screen.

Can anyone help?

It's been discussed inhttp://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=2939 but I don't understand exactly what need to be done. Can someone elaborate it?

I got this issue addressed. What I did was: (1) download AJAX contol toolkit with source, (2) change ModalPopupBehavior.js, (3) rebuild AJAX control toolkit and (4) reload the dll to my project.

Modal Popup Problem Inside Multiview

I have a multiview with six views. Each view has a date field with a imagebutton beside it. When you click the imagebutton is should open a modal popup. The modal popup holds a canledar control. When I bring up this page with the multiview I get the following error: "Assertion Failed: Could not find an HTML element with ID "ImageButton ....." for control of type "sys.UI.Image".

I understand why I get this error, and that's because the imagebutton control exists on the second view that is hidden (because it works on the first view if it's the only one defined to use modal popup) . So then I tried to move the ModalPopupExtender to be within the views. Then when I move to the second view I get "null or not null object" error in the WebResource.axd line 110. The actual statement is "$(_CancelControlID).detachEvent('onclick', _cancelHandler);". I really need to get this working ASAP. If I can make this work with just the Popup (not Modal Popup) that would also be OK, but I have to call the popup from the ImageButton....

As you note, different panels of a MultiView are in many ways like completely separate pages. I like your idea of moving the MPE into the same view as the target control. Does that layout work if you remove the MultiView entirely? If not, then maybe it's something else getting in the way.

Modal Popup Scrollable

I have a grid view inside a modal popup, here is my question: how can i make modal popup scrollable (keep visible) when gridview contains too many rows? Right now all the rows beyond page are remain invisible even I scrolled the scrollbar on the side? Thanks i advance.Try to put that grid inside div with css

overflow: auto

You will need to fix the size of the div too!

Modal popup rendered inside two server controls doesnt work

I'm using the Modal popup from inside a server control named A. When I use the server control from a Page it works perfectly. But when I insert the server control A inside another server control named B, all Modal popup elements are render in page starting absolute position 0,0 where the control A is positioned inside B. I don't find a way to solve this. Any idea?

I will really appreciate any help. Thanks,

JoanBGood.

Please post the code

Modal Popup with asp.net controls on a masterpage through code behind

For some reason, if I have a masterpage, which has a modal popup control (or any toolkit item it seems) and if I have asp.net controls inside of that toolkit control like a textbox or something. If I try and access that textbox from code behind file of that masterpage it will not find it.

Anyone else had this issue?

I have commented out all my code and slowly tested my way through adding it back in and nothing works. But if I take that same exact code and put it on a regular (non-masterpage) file, it works like it's supposed to.

So what am I doing wrong on the masterpage to be able to find my controls from codebehind? Is there some sort of "extra" code I need to use to access items inside of a toolkit control for masterpages specifically?

Thanks.

Scratch that, I'm a freaking moron it seems.

I thought I was in the "page_load" sub, but I was not inside of any sub or function.

Apparently been a long day, I'm good now.

Thanks

Modal Popup, Gridview and Updatepanel.

Here is I have.

A Page that has a button (button1), textbox (textbox1), and a modalpopup. The modalpopup extends a panel that has a usercontrol inside it.

Inside the Usercontrol I have some textbox's and a button (button2). And I also have an updatepanel with a gridview inside.
The update panel has a trigger referencing the button (button2). The gridview has a column with a button (selectbutton) inside. I also handle the rowcommand of the gridview to update textbox1 on the page.

When I click button1 the popup shows fine. Then I enter some stuff inside the textbox's for the usercontrol, and then click button2. The gridview updates as expected.

When I click on the button (selectbutton) inside the gridview I set textbox1 on the page to a value from the selectbutton's row and call the hide method of the modalpopup extender...but textbox1 does not update, and the modalpopup does not close.

Any ideas???

Please try your scenario with the recently available61106 release of the Toolkit (and ASP.NET AJAX Beta 2). If the problem persists, then please reply with acomplete, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

ModalDialog inside updatepanel

I've got a button that shows a modal dialog box. The idea is to add an object to a database, then refresh a listbox on the main page. The dialog works correctly, except with click cmdOk, the server side function is never called. I suspect it's because there's no longer an event handler registered by JS that calls the script to do the postback. I probably need to create a client side script using OnOkScript="onOK()", but I have no idea how to make the page postback to call cmdNewObject_Click without a full postback. Any ideas?

Thanks,

Rick

<asp:LinkButtonID="cmdAddObject"runat="server"Text="Add Object"></asp:LinkButton>

<cc1:ModalPopupExtenderID="ModalPopupExtender1"runat="server">

<cc1:ModalPopupPropertiesBackgroundCssClass="modalBackground"OkControlID="cmdOk"CancelControlID="cmdCancel"DropShadow="true"PopupControlID="pnlAddObject"TargetControlID="cmdAddObject"></cc1:ModalPopupProperties>

</cc1:ModalPopupExtender>

<atlas:UpdatePanelID="pnlPopup"runat="server"Mode="conditional">

<Triggers>

<atlas:ControlEventTriggerControlID="cmdOk"EventName="Click"/>

</Triggers>

<ContentTemplate>

<asp:PanelID="pnlAddObject"runat="server"CssClass="modalPopup"Style="display: none">

<div>

<divid="ObjectName">

<asp:TextBoxID="txtObjectName"runat="server"></asp:TextBox></div>

<div>

<divid="OkButton">

<asp:ButtonID="cmdOk"runat="server"OnClick="cmdNewObject_Click"Text="New Object"/></div>

<divid="CancelButton">

<asp:ButtonID="cmdCancel"runat="server"Text="Cancel"/></div>

</div>

</div>

</asp:Panel>

</ContentTemplate>

</atlas:UpdatePanel>

Seethis post and maybe consider removing the OkControlID property so the Ok button can postback normally (thereby dismissing the ModalPopup). I'm thinking you may also want to get rid of the UpdatePanel here as I'm not sure it'll ultimately be necessary.

ModalPopup and FileUpload

I created a ModalPopup with a FileUpload control inside it. After some initial frustration with trying to get the ModalPopup "OK" button to Postback to the server, I found a thread that suggested setting the UseSubmitBehavior property to false, which did the trick. However, in the click event of my OK button, FileUpload1.HasFile is false, even though I did browse for a file. Any idea why? And how to fix it? Thanks!There are a couple of threads talking about how the 60504 version of ModalPopup does its magic by moving controls around on the form and incorrectly moves things outside the <form> element. I eventually posted a solution that relies on the zIndex CSS property. Please try applying that change to your ModalPopup sources and see if it helps here. If not, please let us know! Thanks.
I tried David Anson'sfix, but it doesn't seem to be working. Perhaps I didn't insert the code right? Or something? I went to the folder where I installed Atlas and drilled down to AtlasControlToolkit/ModalPopup/.... Here I made a backup of ModalPopupBehavior.js, and then inserted the code David wrote where it clearly fit. I restarted Visual Studio in case it needed to reload or something, but it still doesn't work. I opened the DOM Inspector and sure enough the panel is still outside the form. Am I missing something? Thanks!
The change I posted about using zIndex does not move the panel (verified by others on this forum), so if you're seeing the panel be moved after attempting to apply the fix, then something about how the fix was done would seem to be in error. Please double-check what you've done and post your ModalPopupBehavior.js you're unable to get the change to take effect.