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?
Hi
Problem 1:
I am using a ajax modal popup and i wish to have several different ones on my site, for a picture gallery. From what I have understood i need to have a targetcontrolID and am therefor having a dummy button as the targetcontrolID. And then from codebehind i use .Show() on the modal popup to get it showing with dynamic content. However when I use this setup with code behind my button causes a postback that reloads the page, not a very nice result. any suggestions?
Problem 2:
When i get the modal popup up and running I get the cancel button working nice with the cancelcontrolID but i also wish to be able to close the modal popup by just clicking anywhere on the screen. Any suggestions?
/cheers
marcus
Problem 1:
You need to wrap your button in an updatepanel to get an ajax postback rather than a complete page reload. You could also use the Dynamic* properties of the modalpopup to use a web service method to dynamically load the modalpopup content.
Problem 2:
You could try hooking up an onclick handler to the background div that gets created by the modalpopup for the greyed out effect, which you can get access to using $find('ModalPopupBehaviorID')._backgroundElement. I have never tried this so not sure if it will work. Personally, I don't like the behaviour that you are proposing and would leave the modalpopup with just a close button.
Jason
Problem 1: I have now used a updatepanel and it works. there are some glitches though, i now have in my
<contentTemplate>
<%
if i >1 then
modalPopupExtender.Show()
endIf
%>
</contentTemplate>
and I also add 1 to i using viewstate... because otherwise i get the modalpopup the first time the updatepanel loads. is there a nicer way of solving this?
And also i would like the Trigger to be dynamic, since I have 3 different buttons that I all wish to trigger and update the same updatePanel, right now I have 3 different updatePanel that all does the same thing.
Problem 2: Solved it by letting the image that shows be the ancel button and the background just background. thought this worked all right so i havent tried your idea with the div
I wouldn't recommend doing any inline scripting...use code behind instead. I am not sure why you are using this method of incrementing i to show the modalpopup...can't you just make this call to the Show() method in the event handler of the control that fired the postback, e.g. button or link click?
You can update any updatepanel on the page at any time during the postback by calling YourUpdatePanel.Update(). This gives you full control over which parts of the page get updated even if the control that fired the ajax postback lives in a completely different updatepanel. I tend to use this coding method rather than hooking up triggers to the updatepanels.
Hi all. I'm taking my first baby steps into using AJAX and I am having a few difficulties with the ModalPopup.
I placed it in a testpage and it worked fine. The animation was a bit screwy but I've decided to ditch animation for now.
Now I am trying to place it in a page of my site and rather than appearing on top of the page content, it is appearing above it and is pushing it down.
I am calling the Popup from the code behind as a number of operations need to be carried out on page load to determine whether or not it should be shown.
Here is the full .aspx code for the ModalPopup. Page content has been stripped out to save space. If anyone wants to see that I can post it on request.
<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false" CodeFile="Reports.aspx.vb" Inherits="Default1"%><%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Report Centre</title> <link type="text/css" rel="stylesheet" href="StyleSheet.css" /> <link type="text/css" rel="stylesheet" href="style.css" /></head><body style="text-align: center;"> <form id="form1" runat="server"><div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Button ID="btnAnimateTriggerOne" runat="server" Text="Button" OnClientClick="return false;" Visible="False" /><ajaxToolkit:ModalPopupExtender ID="MPE" runat="server" TargetControlID="btnAnimateTriggerOne" PopupControlID="PnlAnimated" BackgroundCssClass="modalBackground" DropShadow="false" OkControlID="hlClose" CancelControlID="hlClose" PopupDragHandleControlID="pnlTitle" /> <asp:Panel ID="PnlAnimated" runat="server" Height="100px" Width="372px" style="background-color:white; border: 1px solid #7da8c8 " Visible="False"> <asp:Panel ID="pnlTitle" runat="server" Height="24px" Width="99.5%" style="border: 1px solid white; background-color: #7da8c8"> <table style="width:100%; border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px;"> <tr> <td style="width: 50%; text-align: left; vertical-align: middle">Tutor Options</td> <td style="width: 50%; text-align: right; vertical-align: middle"><asp:HyperLink ID="hlClose" runat="server" navigateurl="return false;">Close</asp:HyperLink></td> </tr> </table> </asp:Panel> <asp:Label ID="lblTutorName" runat="server" Style="margin-left: 5%" Text="Welcome back "></asp:Label><br /> <asp:Label ID="lblStrangers" runat="server" Style="margin-left: 5%" Text="Strangers on your registers (0)"></asp:Label><br /> </asp:Panel> <div style="width: 386px; height: 18px; position: fixed; left: 1px; text-align: left"> <asp:Label ID="lblUsername" runat="server" Text="Label"></asp:Label> <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink> </div>//Page content goes here. Just a load of tables and server controls.</div></form></body></html>
and here is the code behind
'check if querystring is null or empty. Exit sub is true, retrieve if false. If String.IsNullOrEmpty(Request.QueryString("tut")) = True Then vTutID = "R787" Else vTutID = Strings.Replace(Request.QueryString("tut"), "'", "''") End If If Queries.StaffIsTutor(vTutID) = True Then vTutName = Queries.StaffNameFromID(vTutID) vStrangers = Queries.CountStrangersByStaff(vTutID) If vStrangers = 0 Then Else lblTutorName.Text &= vTutName lblStrangers.Text = "Strangers on your registers: " & vStrangers PnlAnimated.Visible = True MPE.Show() End If
Again, I've stripped out the rest of the code behind as IE was seriously lagging when I copied and pasted the whole lot. I will post this on request if no one can see the problem from what I have posted.
I have a feeling the problem is something to do with <div> tags as I have read these can effect some AJAX controls, but I've tried various configurations of DIV tags with no effect.
Hello,
I amde some changes to your page and it works fine. Iremoved visible = false on the server controls. When you do this, the controls are not drawn and no space is reserved for them at page load. Consider adding a style display:none if you do not want to see them at page load.
I also removed the positioning 'fixed' for the bottom div.
When I click the button the mpe shows in the center of the page. I also added my own css for the background.
Give it a try.
-Louis
.modalBackground {background-color:Gray;filter:alpha(opacity=70);opacity:0.7;}
.modalPopup {background-color:#ffffdd;border-width:1px;border-style:solid;border-color:black;padding:0px;text-align :center ; }
<cc1:ModalPopupExtenderID="MPE"runat="server"
TargetControlID="btnAnimateTriggerOne"
PopupControlID="PnlAnimated"
BackgroundCssClass="modalBackground"DropShadow="false"
OkControlID="hlClose"CancelControlID="hlClose"
PopupDragHandleControlID="pnlTitle"/>
<asp:PanelID="PnlAnimated"runat="server"Height="100px"Width="372px"style="background-color:white; border: 1px solid #7da8c8 ">
<asp:PanelID="pnlTitle"runat="server"Height="24px"Width="99.5%"style="border: 1px solid white; background-color: #7da8c8">
<tablestyle="width:100%; border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px;">
<tr>
<tdstyle="width: 50%; text-align: left; vertical-align: middle">Tutor Options</td>
<tdstyle="width: 50%; text-align: right; vertical-align: middle"><asp:HyperLinkID="hlClose"runat="server"navigateurl="return false;">Close</asp:HyperLink></td>
</tr>
</table>
</asp:Panel>
<asp:LabelID="lblTutorName"runat="server"Style="margin-left: 5%"Text="Welcome back "></asp:Label><br/>
<asp:LabelID="lblStrangers"runat="server"Style="margin-left: 5%"Text="Strangers on your registers (0)"></asp:Label><br/>
</asp:Panel>
<divstyle="width: 386px; height: 18px; text-align: left">
<asp:LabelID="lblUsername"runat="server"Text="Label"></asp:Label>
<asp:HyperLinkID="HyperLink1"runat="server">HyperLink</asp:HyperLink>
</div>
//Page content goes here. Just a load of tables and server controls.
</div>
I've made the changes you suggested and that has sorted that out.
The only problem I have now is that the panel controls flash up in the page content momentarily as the page loads before they are shown as the Modal Popup. I've read that you can prevent this by setting the height and width to 0 and then changing this with a startup animation. I tried this previously on my test but could not get the animation to work.
All I'm after in terms of an animation is to have it drop down from the top of the page to the middle or some sort of expanding animation. If its easier, it can just appear, but I tried all of these methods and more and it just didn't work. Unfortunately I deleted the animation code in frustration so are there any good sites that offer example of various animation code. I had a look at ajax.asp.net but it didn't make much sense to me tbh.
I don't wish to take the michael but if you could help me with this too, even by just providing a link to the solution, I would be extremely grateful.
To stop the flashing, try setting the style display:none on the panel.
That worked fine, can't believe I overlooked the display property!
Thanks for your help louisdegrazia. You have been marked as Answer x2.
Glad to help! I like to formatting on your popup!
I have a modal popup that pops up over a web page that does not require scrolling to view the content. As soon as the modal popups up, scroll bars appear.
I looked at the source code for the modal, and it calculates the screen size to make the background fit correctly, but it some how figures in the size of the modal popup content into it's calculation. It then sets the background height and width according to that. The most annoying is if the modal is over 550px wide, it will put scroll bars on the bottom. If you scroll those, the page css doesn't cover the extra space and looks horrible.
I have played with the modal and parent containers' css for size and position, but I can't get rid of the scroll bars. I even set the body's overflow to hidden which really f's up the look.
What can I do for this?
I figured it out. Set the panel to absolute and set the top to 0px. Doesn't change the position actually, but tricks the calculation of the screen size.
I was wondering if there was a way to change the inner content of the modal panel when the user clicks a certain button. Is this a job for the UpdatePanel?
As it stands, I'm just binding to a TargetControlID, and I can Ok/Cancel, but would like the content to change onOk.
I'm quite new to this whole atlas way of thinking, so I'm not sure how to co-mingle all this client/server stuff.
Any help would be appreciated.
-Ty
Hi,
you can also use the DynamicPopulateExtender to load new content inside a panel.
Regards
Marc André
hi,
modalPopup will recenter itself when the contents change size.
i have a gridView which may change size according to a users input. modalPopup will recenter itself, but only AFTER the user attempts to scroll the window.
is there a way to force the modal-popup to 're-evaluate' itself based on a trigger? or how do i call the resize function that it obviously has.
thank you.
Hi RomanT,
We don't have built in support for this, but you can call the_layout function on your client-side ModalPopupBehavior instance.
Thanks,
Ted
Is it possible to have multiple controls open up the same modal popup window? I have content with 3 different links I need to openup the same modalpop up window.
Yes, that's achievable.
You can add client side click event handler to those links, and show the modalpopup in the handler.
For instance:
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Button ID="Button2" runat="server" Text="Button"OnClientClick="$find('mpe').show(); return false;" />
<asp:Button ID="Button3" runat="server" Text="Button"OnClientClick="$find('mpe').show();return false;"/
<asp:Panel ID="Panel2" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
<div>
<p>Choose the paragraph style you would like:</p>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtenderBehaviorID="mpe"ID="ModalPopupExtender1" PopupControlID="Panel2" runat="server" TargetControlID="Button1" >
</ajaxToolkit:ModalPopupExtender>
</form>
</body>
</html>
Hi,
I have a some problem with the modalpopup control. Its on everytime a full postback happens, the browser "displays" all the content of my modalpopup, in way that how it's going to look like when you dont add the extender to your panels. The panels then "disappear" after the page is loaded, and the modalpopups work as they are supposed to.
how do i prevent the panels from "blinking"/showing on full page postbacks?
Add style="display:none;" to the panels.
this seems to work. thanks!
however i have one question. before, I was adding display:none; to my panels through the css class on a separate css file. it wouldnt work that way since the panels will disappear forever. it only works when i put display:none; on the <asp:Panel> from the html source. why is it like that?
I believe that the modalpopup works by toggling the style attribute but if you have display:none permanently set in the CSS then it isn't going to work. Bit of a pain I know but not a huge deal to add it to the panel.
Hi all,
I have a page with 3 divs : the top div for the menu (navigation), the left div for a thin decoration and the main central div for the content itself.
When I click on one of the items of my repeater, the modalpopup shows up but thegray background only covers the main central div, not the other 2.
Please check the attached screenshot.
My question is : is there a way for mygray background to cover the whole browser ie all my divs ?
thank you
I am also experiencing the same problem. Anyone?
Let me know if you find a solution.
I have done limited testing, however, I was able to fix the problem by modifying the ModalPopupBehavior.js file:
I commented out the appendChild and replaced it with the code block around line number 75 of the script
//this._foregroundElement.parentNode.appendChild(this._backgroundElement); if (document.forms != null && document.forms.length > 0) { document.forms[0].appendChild(this._backgroundElement); document.forms[0].appendChild(this._foregroundElement); this._foregroundElement.style.zIndex = 10001; }
Perhaps you can help me!
I've been looking this issue for quite a bit now. I am using the latest march release of the toolkit now (with my mods). I have changed the initialize to perform the following:
//this._foregroundElement.parentNode.appendChild(this._backgroundElement); if (document.forms != null && document.forms.length > 0) { document.forms[0].appendChild(this._backgroundElement); document.forms[0].appendChild(this._foregroundElement); this._foregroundElement.style.zIndex = 10001; } else this._foregroundElement.parentNode.appendChild(this._backgroundElement);All was working fine for me, until I nested a popup within a popop, now I am getting the following error:Sys.InvalidOperationException: Two components with the same id '{0}' can't be added to the application.
I tried a number a variations to the above with no success. I am now playing with the dispose method. Should I give up on this? or continue on the track I am on.
HELP!
Ok, day two of trying to solve my problem. In addition to work item 8360, I wrote a function that zero's out the zIndexes on the show of the modal and resets them when the modal hides. Again, all seemed fine, until I tried to pop a modal from a modal. Is there a global array that will give me the list of all the registered popups? If so I can exclude them from my logic.
I also had to use a property runtimeStyle that is specific to MS IE. We'll have to find a work around for that.
Any help would be appreciated!!!