Is it possible to use modal popup with asp listbox control? I would like to show modal popup once an item in the asp lisbox is double-clicked. Any ideas, tips, help, or anything else on how to achieve this functionality?
Thanks in advance,
Marko Vuksanovic.
Good day to all,
i,m currently having problems with modal popup with validation control in it. i'm currently using the modal popup for insert. but if enableclientscript of the validation control inside the modal popup is set to true, during modalpopupextender.show(), the page just freeze/hangs even the other controls in the page stops responding... can someone help me on this one?
thanks in advance,
jay
I've figured it out... I'm not sure why, but if your using a dummy button as a targetcontrol for the modal popup, it freezes/hangs if you'll set the enableclientscript of the validator inside the modal popup to true. but if u'll put the modal popup in one update panel together with the targetcontrol (not using a dummy) it will work.greetings,
Have a modal popup control as follows:
<
cc1:ModalPopupPropertiesWhat I'm trying to do is to populate a gridview full of options (that is on the p_popup panel) when the user clicks the lb_verify link button. This gridview will be populated based on a textbox entry, so it's dynamic.
When I try to do this on the lb_verify.click action, the sub does not fire... only the popup modal...
Following is my lb_verify sub just in case that will help...
Protected
Sub lb_verify_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles lb_verify.ClickLet me know and thanks.
Rock
This sounds like work item 207 which is not yet implemented.I have a modal popup control that is created dynamically along with various other controls on Page_Init. Actually it's a user control created dynamically, and part of that user control is the modal popup.
Inside the modal popup is basically just a grid view with some hyperlink columns. The problem is that none of the links ever seem to respond. The popup is shown by a serverside call to the Show() method.
I experimented and put a few buttons and various other controls, and while the button animates like it's been pressed, no server code fires. This happens reguardless of the control type; radiobuttons won't even check. This occurs in controls both inside and outside of the gridview.
Anyone run into something similar with a dynamically created modal popup?
When the controls are being created dynamically, are you attaching events to the objects that will be posting back (ie the modal popup window). I have a similar situation where I have a user control that dynamically creates buttons. The buttons did not work until I added a event handler once I created them. When you add conntrols to a page, this is done automatically, but If you create a control dynamically, you must tell the page what to do with its events when they are raised. Make sence?
-Alan
Yes, it makes sense. The standard events that are tied into the controls, Page_Load, Page_PreRender, etc. all fire fine at the right times. It's only UI events like Click that don't respond on the server side. I can get them to execute javascript (of course) but I'd like to avoid having to hack together a callback function just to get a button working. Besides wiring the buttons/links/etc with events directly from the aspx page, I've tried adding the controls dynamically also (within the dynamically created user control housing the modalpopup) and then wiring them to the events.
Adding the controls that way in the user control's Load, and Init events both yield the same results. The code gets run and the controls get created, but they do not respond to UI events.
There have been several posts regarding the modal popup control and beta 2 but I haven't seen one regarding my issue yet. Here is a code sample of the page:
<atlas:ModalPopupExtender ID="mpeCutAreas"
BackgroundCssClass="modalPopupBg"
TargetControlID="btnHidden"
PopupControlID="pnlCutAreas"
CancelControlID="btnCloseCutAreas"
DropShadow="true"
runat="server" />
<asp:Button ID="btnHidden" UseSubmitBehavior="false" Style="visibility: hidden;" runat="server" />
<asp:Panel ID="pnlCutAreas" Style="display: none;" CssClass="modalDialog" runat="server">
<input type="hidden" id="hidGeographyId" runat="server" />
<div>
<h2>Cut Areas</h2>
<asp:DataGrid CssClass="grid" ID="dgCutAreas"
AutoGenerateColumns="false"
ShowFooter="true"
OnItemCommand="dgCutAreas_ItemCommand"
OnItemDataBound="dgCutAreas_ItemDataBound"
ShowHeader="true"
GridLines="None"
DataKeyField="CA_ID"
runat="server">
<HeaderStyle CssClass="gridHeader" />
<ItemStyle CssClass="gridItem" />
<AlternatingItemStyle CssClass="gridAltItem" />
<FooterStyle CssClass="gridFooter" />
<Columns>
<asp:TemplateColumn HeaderText="Active">
<ItemTemplate>
<asp:HiddenField ID="hidCutAreaId" Value='<%# DataBinder.Eval(Container.DataItem, CutArea.ColumnNames.CA_ID) %>' runat="server" />
<input type="checkbox" id="chkIsActive" runat="server" />
</ItemTemplate>
<FooterTemplate>
<input type="checkbox" disabled="disabled" id="chkIsActive" runat="server" />
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Name">
<ItemTemplate>
<input type="text" id="txtName" size="22" value='<%# DataBinder.Eval(Container.DataItem, CutArea.ColumnNames.CA_Name) %>' runat="server" />
</ItemTemplate>
<FooterTemplate>
<input type="text" id="txtName" size="22" runat="server" />
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<FooterTemplate>
<asp:Button ID="btnAddCutAreaRow" CommandName="Insert" Text="Add" runat="server" />
</FooterTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<br />
<asp:Button ID="btnSaveAllCutAreas" OnClick="btnSaveAllCutAreas_Click" Text="Save" runat="server" />
<asp:Button ID="btnCloseCutAreas" Text="Close" runat="server" />
</div>
</asp:Panel>
The error I am recieveing is this:
The control 'btnHidden' already has a data item registered.
Parameter name: control
One strange thing I did notice, is that if I set AutoEventWireup = false the problem goes away, but of course I'd rather not have to manually wire up the page when using C#. Not sure if that is a clue or not.
This code did work fine under beta 1.
Any help would be great.
Thanks,
Frank
Having the same problem.. anyone have any idea what would cause it..
In my situation I am using an updatepanel in a masterpage, and inside that I have a control createaccount, that has a panel in it which I have assigned to the modal popup extender, which sits in the masterpage it works fine, but after I trigger a postback manually, and re-show the panel, I get that error! Its strange cause if I don't call the mpecreateaccount.show() method it works fine, I only seem to get it after i call mpecreateaccount.show()..
Any ideas would be greatly appreciated!
Hi
My webpage contains a modal popup. I am using the atlas release - the june ctp i think
I'm getting an error on my webpage if I view it in Internet Explorer 6. This is the error
Can't move focus to the control because it's invisible not enabled or of a type that does not accept focus
I get this error on page load. Everything works fine but naturally i dont like the error message.
I would really appreciate it if you could take a look and shed some light on it for me
http://84.92.22.217/UChoose/frames.aspx
thanks a lot
andrea
I checked your website and did not see any error message. Everything works fine.Currently I have User Control that has radio button list that changes options on the user control, some text boxes and a button that updates a list box with options selected within the user control. Any object that causes a post back seems to cause my modal popup control to disappear. How can I better control this? There are three postback operations that the user will go through in order for thems to get the correct selection - which should cause the modal to disappear and an update to happen to the calling page controls.
Any suggestions?
How about putting the UserControl inside an UpdatePanel if it isn't? Is this what you are trying to do? (The WebUserControl you'll have to supply.)
<%@. Page Language="C#" %><%@. Register src="http://pics.10026.com/?src=WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %><!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>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function Show() { $get('WC').style.visibility = 'visible'; } function Hide() { $get('WC').style.visibility = 'hidden'; } </script> <button id="show" onclick="Show()"> show</button> <button id="hide" onclick="Hide()"> hide</button> <div id="WC" style="visibility: hidden"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <uc1:WebUserControl ID="WebUserControl1" runat="server" /> </ContentTemplate> </asp:UpdatePanel> <button id="close" onclick="Hide()">close</button> </div> </div> </form></body></html>I do have my user control within the UpdatePanel, currently. Within my user control there are database queries and options (basically its a search utility that give the user multiple options for searching the database to find the correct record). Once they have filled in their options within the search utility they are given a listbox (still within my user control) to select a record. Once the record is selected the calling page gets a control updated with the record ID which then causes a textchanged event that pulls up that record detail.
I wanted to utilize the modal popup extender so that when they search they can not horse around on the calling page. I do have have a version of this working with showing and hiding the update panel directly - however the modal popup extender (still using the atlas control) seemed to be a better option for this type of implementation.
By the way thanks so much for your quick response...
I decided it might be easier to give you my page code: Keep in mind that the problem is the post backs within my User Control. Any post back within the User Control itself cause the Modal Popup to become unmodal...
1<%@. Page Language="VB" AutoEventWireup="True" %>23<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>4<%@. Register src="http://pics.10026.com/?src=PagesAndControls_View/SiteSelection.ascx" TagName="SiteSelection"5 TagPrefix="uc1" %>6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">78<script runat="server">910 Protected Sub OkButton_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs)11 Label1.Text = "OK Button Clicked"12 Me.txtSiteID.Text = "OK Button"13 Dim myPopUp As ModalPopupExtender = Me.ModalPopupExtender114 myPopUp.Hide()15 End Sub1617 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)18 Label2.Text = "Other Button Clicked"19 Label1.Text = "Other Button Clicked"20 End Sub21 Protected Sub myTestScript()22 Label2.Text = "text script initiated"23 End Sub24</script>2526<html xmlns="http://www.w3.org/1999/xhtml">27<head runat="server">28 <title>Test Selection Page29 </title>30</head>31<body>32 <form id="form1" runat="server">33 <asp:ScriptManager ID="ScriptManager1" runat="server">34 </asp:ScriptManager>35 <div>36 <asp:UpdatePanel ID="PagePanel" runat="server">37 <ContentTemplate>38 <asp:Label ID="Label1" runat="server" Text="Enter Site ID or Search:"></asp:Label>39 <asp:TextBox ID="txtSiteID" runat="server"></asp:TextBox>40 <asp:ImageButton ID="SearchButton" ImageUrl="~/images/search.jpg" runat="server" />41 <asp:Panel ID="Panel1" CssClass="modalPopup" runat="server" Style="display: none"42 Wrap="False">43 <uc1:SiteSelection ID="SiteSelection1" runat="server" />44 <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>45 <div align="center">46 <asp:ImageButton ImageUrl="~/images/checkmark2.jpg" ID="OkButton" runat="server"47 OnClick="OkButton_Click" />48 <asp:ImageButton ImageUrl="~/images/closebutton5.jpg" ID="CancelButton" runat="server" />49 </div>50 </asp:Panel>51<!--52 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />53 -->54 <cc1:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="SearchButton" runat="server"55 PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true"56 CancelControlID="CancelButton" OkControlID="OkButton" />57 </ContentTemplate>58 </asp:UpdatePanel>59 </div>60 </form>61</body>62</html>
Are you using the latest ModalPopupExtender in the AJAX Control Toolkit release 61020?
http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit&ReleaseId=825
I'm pretty sure that I am. I thought maybe my modal popus was outdated, so I deinstalled the atlas and installed the ajax version just yesterday and the problem persisted
Hey.
Was any progress made on this? I'm experiencing the problems now too (with the December Futures, and latest Toolkit)
Thanks,
Chris
The way I fixed this modal problem was by defining a boolean property PopupOpen (and keeping it in session). In the pre_render of the control i call modalpopupextender.show if PopopOpen is true. By setting the property I can control whether the popup is Open (you can wrap this in a user-control).
Hope you get the idea,
Martijn
Thanks...
I just managed to figure it out a different way. I addedUpdateMode="conditional" to the UpdatePanel on the page. Works a treat!
Good day!
First I have to say that the ajax control toolkit is great! Lots and lots of good stuff in there.
Now, I have designed a site that has a header, content and a footer div (to avoid frames, but to simulate the effect.. if there is a better way, please let me know).
The divs are positioned absolutely, and their locations are to some parts calculated during display-time. Here's a small diagram, to help you understand better.
<html><head></head>
<body><form>
<div id="divHeader">...</div>
<div id="divContent">
<div id="anotherDiv">...</div><modalpopupextender />
</div>
<div id="divFooter">...</div>
</form></body></html>
Very simplified, but it displays my setup.
Now to the problem. The modal popup extender displays a black opaque panel, to darken the inaccessible content. With this setup however, it only blocks out the divContent div, not the header nor the footer divs.
Any ideas of how to solve this?
That should not cause the modal background to not cover the header and footer. Could you possibly post a small complete code sample that reproduces this issue?
Ok then. I made a small sample site. I have no hosting, so Ill paste the code here. The codefile only contains the eventhandler btnShowPopup_Click, and all it does is ModalPopupExtender1.Show();. If you want to, I can zip the entire project to a file instead, but I think its more accessible this way, since its not very much code.
So, here we go (with excuses for poor formatting):
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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 id="Head1" runat="server">
<title>Untitled Page</title
<script type="text/javascript">
window.onload = Init;
function SetContentSize()
{
divContent.style.top = divHeader.offsetHeight;
}
function Init()
{
window.onresize = SetContentSize;
SetContentSize();
}
</script>
<style type="text/css">
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="divHeader" style="position:absolute; left: 0px; right: 0px; top:0px; height: 100px;
background-color: #ffcc00; text-align: center; vertical-align: middle;">
This is the header div.<br />
This will not be covered by the extenders overlay.
</div>
<div id="divContent" style="position:absolute; left: 0px; right: 0px; bottom: 0px;
background-color: #ffee99; text-align: center; vertical-align: middle;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
This is the content div.
<asp:Button ID="btnShowPopup" runat="server" Text="Show popup" OnClick="btnShowPopup_Click" />
<asp:Panel Style="border-right: gray 1px solid; border-top: gray 1px solid; display: none;
vertical-align: top; border-left: gray 1px solid; color: black; border-bottom: gray 1px solid;
background-color: #dddddd" ID="pnlPopup" runat="server" HorizontalAlign="Left">
This is text inside the popup!
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<asp:Button Style="visibility: hidden" ID="btnHidden1" runat="server"></asp:Button>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="true"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" PopupControlID="pnlPopup"
TargetControlID="btnHidden1">
</cc1:ModalPopupExtender>
</ContentTemplate></asp:UpdatePanel>
</div>
</form>
</body>
</html>
I should add; Even though the script in my example fills no real function, it does in the live version where my divHeader has a variable height. I included it to be more true to the original.
Thank you for the attention.
I tried replacing the modal popup with an ordinary div. I think one can summarize the problem like this: Internet Explorer can NOT position an absolutely positioned div outside of the absolutely positioned div in which it resides. Therefore, I believe this to be more of a browser problem, than an ajax problem.
I have not tested this on Firefox / Opera / etc.. It would be interesting to see if they can handle it.
Jeez, I just read what I wrote above.. I assure you though; it makes sense if you think about it. 
I am trying to show and hide a modal popup in auser control which is called under contentpage of masterpage , as aseparate page the sample works fine but when embed this sample in usercontrol or content page or master page i get the error say this._popupis null or not an object
The following is the code
<script type="text/javascript" language="javascript">
var _popup;
function validate(){
// find the popup behavior
this._popup = $find('mdlPopup');
// show the popup
this._popup.show();
// kick-off the webservice, registering our callback
PageMethods.ValidateCreditCard($get('txtNumber').value, this.callback);
}
function callback(result){
// hide the popup
this._popup.hide();
// let the user know if their credit card was validated
if(result){
alert('congrats, your Number is valid!');
}
else{
alert('sorry, your Number is not valid!');
}
}
</script>
<script runat="server">
/// <summary>
///
/// </summary>
/// <param name="number"></param>
/// <returns></returns>
[System.Web.Services.WebMethod]
public static bool ValidateNumber(string Number)
{
bool isValid = false;
try
{
if(Number=="234")
{
isValid=true;
}
}
catch {}
return isValid;
}
</script>
Thanks
Are you using the $find command correctly? See the documentation:http://www.asp.net/ajax/documentation/live/ClientReference/Sys/ApplicationClass/SysApplicationFindComponentMethod.aspx.
It states "Use the findComponent method to get a reference to a Component object that has been registered with the application through theaddComponent method.".
Also, your problem could be that the client ID isn't 'mdlPopup' since it is a apart of a container control.
-Damien
I created a user web control containing a blue panel which will pop up when user clicks on a text box. I use Modalpopupextender for this purpose. It is very simple!
When I reuse this control in a page, the blue panel shows up for a fraction when the page is loaded. This is very annoying cause I basically can't create my own modal dialog box and reuse for different pages. Is this a bug in the toolkit or do I need to add something to my control?
Thanks
MY CONTROL:
<%@dotnet.itags.org.ControlLanguage="C#"AutoEventWireup="true"CodeFile="TestPopUpBox.ascx.cs"Inherits="Admin_Configuration_TestPopUpBox" %>
<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>
<asp:PanelID="Panel1"runat="server"BackColor="Blue"Height="235px"Style="position: relative"
Width="556px"><asp:TextBoxID="TextBox1"runat="server"Style="position: relative"></asp:TextBox></asp:Panel>
PAGE:
<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Test.aspx.cs"Inherits="Admin_Configuration_Test" %><%@dotnet.itags.org.RegisterSrc="AddDeviceControl.ascx"TagName="AddDeviceControl"TagPrefix="uc1" %>
<%@dotnet.itags.org.RegisterSrc="TestPopUpBox.ascx"TagName="TestPopUpBox"TagPrefix="uc2" %><%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title></head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
This is the page<br/>
<uc2:TestPopUpBoxID="TestPopUpBox1"runat="server"/>
</div>
</form></body>
</html>
<cc1:ModalPopupExtenderID="ModalPopupExtender1"runat="server"TargetControlID="TextBox1"PopupControlID="Panel1"></cc1:ModalPopupExtender>
I found another post which solves my problem.
You have to add "display:none" attribute to the panel style. I guess the code in AJAX control takes some time to iterate through all the controls on the page to find and hide the target panel.
Hello,
I am getting some undesirable behavior from the modal popup extender control. Everything works fine except for the fact that when i load or reload the page, you can see the modal popup box at the bottom of the page blink for about 1 second and then disappear. Why does it do this? Has anyone else seen this before? I would rather not see the box blink at the bottom of the page when loading the page, it just looks weird. Other than that, it appears fine when i click my button. Its just annoying to see it on the page load.
Any ideas here?
usually you need to set the style='display:none'
awsome...that did the trick...in the panel tag i did this:
<asp:Panel ID="pnlModalCheckUser" runat="server" Height="110px" Width="250px" CssClass="modalPopup"style="display:none">
even though style didn't come up as a valid property for the asp:panel tag in intellisense. But it works, i'm assuming it just passed the style along to the processed div tag.
Thanks a bunch!
Hello misters,
I have a page ASPX with ModalPopupExtender control, with the following properties:
TargetControlID="btnAnyadirObs"
PopupControlID="Panel1"
OkControlID="btnAnyadirObsAceptar"
CancelControlID="btnAnyadirObsCancel"
OnOkScript="onYes()"
OnCancelScript="onCancel()"
I have a Panel (Panel1) with two buttons: btnAnyadirObsAceptar and btnAnyadirObsCancel.
The buttons have Click event (code-behind .cs).
My trouble is that it is not execute Click event for button btnAnyadirObsAceptar (the OkControlID). I want to press the button OK in modal popup extender and I call Click event (server event of code-behind, file .cs).
Only execute onYes function javascript but it fails because typeof(Sys.WebForms.PostBackAction) == "undefined"
For javascript function onCancel() , $("Label1") fails.
See all code below, please.
The code begins here:
<asp:Label ID="Label1" runat="server" />
... more code...
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="btnAnyadirObs"
PopupControlID="Panel1"
OkControlID="btnAnyadirObsAceptar"
CancelControlID="btnAnyadirObsCancel"
OnOkScript="onYes()"
OnCancelScript="onCancel()"
DropShadow="true" PopupDragHandleControlID="Panel3">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" Style="display: none">
<asp:Panel ID="Panel3" runat="server"><div>TITLE</div></asp:Panel>
<filtros:EmbeddedUserControlLoader ID="UCObservacionesPopup" runat="server" AssemblyName="TareaRetenida.UC"
ControlClassName="UCRetenidaCentrolControlObservacionesPopup" ControlNamespace="TareaRetenida.UC" />
<controles:Boton ID="btnAnyadirObsAceptar" runat="server" CausesValidation="false" Text="Resx OK" OnClick="btnAnyadirObsAceptar_Click" />
<controles:Boton ID="btnAnyadirObsCancel" runat="server" CausesValidation="false" Text="Resx Cancel" OnClick="btnAnyadirObsCancel_Click" />
</asp:Panel>
The javascript functions:
function onYes()
{
var idBoton= "MY CLIENTID OF BUTTON OK";
if (typeof(Sys.WebForms.PostBackAction) != "undefined")
{
var postBack = new Sys.WebForms.PostBackAction();
postBack.set_target(idBoton);
postBack.set_eventArgument('');
postBack.performAction();
}
}
function onCancel()
{
//no postback necessary
try
{
$('Label1').innerText = 'Action canceled';
}
catch(err)
{
alert('onCancel' + "Error " + err.description);
}
}
Thanks in advanced, greetings regards
Hi,
you need to clear the OKControlID property otherwise the postback won't be propagated to the server.
Grz, Kris.
Hi Alice,
myNameIsAlice:
I cleared the OKControlID and now my js is not running?
which js isn't running? Know that clearing the OKControlID just makes it a normal postbacking control again.
Grz, Kris.
Now if i only have 1 modal popup extender(for sign in control), everything works fine as expected. But as soon as i add one more modal popup extender(for register control), both controls stop working.
Has anyone encountered a similar problem? Am i missing something?
Any help or tips will be great. Thank you for your time. -Sanjay.Maybe check for script errors during page load?
I believe others have had success sticking the ModalPopupExtender inside the item template.
I'm creating a DotNetNuke Module (DNN v4.5.3).
I've successfully added the Modal Popup into the module, but when i open it up it doesn't center on the screen (it centers to the control, which partically makes sense), also the background Styles do no apply themselves when the modal is being shown.
Has anyone ran into this issue before?
Thanks in advance for any replys, i'll update this post if i figure things out.
SyntaxC4
I messed around with the positioning of this control forever yesterday. I could not get it to work either. I'm also using DNN 4.5.3. If you find a solution, please post it!
Thanks.
Hi SyntaxC4,
My understanding of your issue is that your ModalPopupExtender doesn't shown on the center of the screen and also it has css issues.If I have misunderstood, please feel free to let me know.
Please make sure that the ModalPopupExtender is not located in a frame or IFame. If the ModalPopupExtender is inside a IFame, it will shown at the center of the IFrame instead of the screen.
The css issue, you can refer to the samples which contains in the Ajax Control Toolkit's source code. Here is the section:
/*Modal Popup*/
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
I hope this help.
Best regards,
Jonathan
Thanks for the reply Jonathan, I should have included some code so i will do that now.
<ASP_CODE>
<asp:ModalPopupExtender ID="AddPopUp" runat="server" TargetControlID="AddRangeOpen" PopupControlID="AddRange" CancelControlID="AddCancel" PopupDragHandleControlID="AddRangeHandle" BackgroundCssClass="modalBG" /><asp:Panel ID="AddRange" runat="server" Style="display:none;" CssClass="modalWindow"> <table> <tr> <td colspan="2"> <asp:Panel ID="AddRangeHandle" runat="server" CssClass="title"> <asp:Label ID="HandleLabel" runat="server" Text="Add Shipping Range" /> </asp:Panel> </td> </tr> <tr> <td><asp:Label ID="RangeStartLabel" runat="server" Text="Range Start:" AssociatedControlID="RangeStart" /></td> <td><asp:TextBox ID="RangeStart" runat="server" /></td> </tr> <tr> <td><asp:Label ID="RangeStopLabel" runat="server" Text="Range Stop:" AssociatedControlID="RangeStop" /></td> <td><asp:TextBox ID="RangeStop" runat="server" /></td> </tr> <tr> <td><asp:Label ID="RangeValueLabel" runat="server" Text="Range Value:" AssociatedControlID="RangeValue" /></td> <td><asp:TextBox ID="RangeValue" runat="server" /></td> </tr> <tr> <td colspan="2"><asp:CheckBox ID="isRangePercent" runat="server" Text="Percentage:" TextAlign="Left" /></td> </tr> <tr> <td colspan="2"><asp:CheckBox ID="isActive" runat="server" Text="Active:" TextAlign="Left" /></td> </tr> <tr> <td colspan="2" align="right"><asp:Button ID="AddSave" runat="server" Text="Save" OnClick="AddSave_Click" /><asp:Button ID="AddCancel" runat="server" Text="Cancel" /></td> </tr> </table></asp:Panel>
</ASP_CODE>
<CSS_STYLES>
/************************//****/ AJAX MODAL/****//************************/.modalBG{ background-color: #666; Filter:alpha(opacity=70); opacity:0.7;}.modalWindow{ background-color: #FFF; border: solid3px #333; padding:3px;}.title{ background-color: #5D7B9D; color: #FFF; font-weight:bold; text-align:center;}</CSS_STYLES>
This code is in a Control, not a page. I think this is what is causing the issue. As the modal pops up within the confinements of the control and not to the center of the page.
Thanks for any more information in advance.
SyntaxC4
I've had this same issue and I believe you can add this to your stylesheet.
.modalWindow
{
background-color: #FFF;
border: solid3px #333;
padding:3px;
position: absolute;
left: 50%;
top: 50%;
}I'm not sure if you need the position: absolute; or not though.
sstewart:
I've had this same issue and I believe you can add this to your stylesheet.
.modalWindow
{
background-color: #FFF;
border: solid3px #333;
padding:3px;
position: absolute;
left: 50%;
top: 50%;
}I'm not sure if you need the position: absolute; or not though.
I've added the underlined lines into my css document and it didn't have an effect on my modal popup. It's still not graying the background, i know these styles work as i've made other ASP.net sites with them, but DotNetNuke doesn't seem to be happy with AJAX.
I'm still trying to work this issue out, i'll post a solution if i come across one, but help is still appretiated.
Thanks to all that replied
SyntaxC4
My problem is that i have added the modal popup control into a usercontrol. The usercontrol has the code for the modal and the button to initiate the popup.
When i added the usercontrol to a page and click on it this is what i get. My site is centered so i have already scrolled pretty far to the right already so that only the right hand side of my site is showing but then youll see how much grey there is. If you look at the bottom of the picture youll see that there is still alot of room left to scroll to the left. This is my problem. Im not sure why its not displaying on the main screen like the examples.
Now if i remove it from the usercontrol and just put it in the master page then it works fine.
Any ideas??
I tried this with the Toolkit sample page and could not repro the issue. Could you possibly post a small repro? Note that we have fixed some modalpopup positioning issues in the latest versions of the Toolkit. Although, we know that there are some more improvements required for specific cases. If you have the sample ready where the modalpopup does not work as expected that will help us a lot.
I updated to the newest version and while it does not do the same thing its still off centered. Here is code for the main page and user control.
USERCONTROL:
<div style="position:absolute; right:0; top:0;">
<asp:ImageButton ID="cmdGetHelp" runat="server" ImageAlign="absmiddle" ImageUrl="/images/icon_help_32px.gif" />
</div
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<!--HEADER-->
<asp:Panel ID="Panel3" runat="server" Width="500" CssClass="modalTitle" style="cursor:move;">
<div>
<p>TITLE</p>
</div>
</asp:Panel
<!--CONTENT-->
<div>
Content goes here
</div> <!--BUTTONS--> <div style="text-align: right;"> <asp:Button ID="OkButton" runat="server" Text="Submit"/> <asp:Button ID="CancelButton" runat="server" Text="Cancel" /> </div></asp:Panel><ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="cmdGetHelp" PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton" OnOkScript="ClosePopup()" CancelControlID="CancelButton" DropShadow="true" PopupDragHandleControlID="Panel3" />
DEFAULT.APSX
<!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>Untitled Page</title> <style type="text/css" > .page-container {width:900px; margin:0px auto; border:solid 1px rgb(150,150,150);font-size:1.0em;} .main {border:solid 1px orange; clear:both; width:900px; padding-bottom:30px;} .main-navigation {border:solid 1px red; display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .main-content {border:solid 1px green;display:inline /*Fix IE floating margin bug*/; float:left; width:650px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .footer {border:solid 1px blue; clear:both; width:900px; padding:1.0em 0 1.0em 0; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header {width:900px; font-family:"trebuchet ms",arial,sans-serif; border:solid 1px red;} .header-top {width:900px; height:80px; background:rgb(240,240,240); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-middle {width:900px; height:70px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-bottom {width:900px; } .header-breadcrumbs {position:relative;clear:both; width:890px; padding:0.9em 0 0.9em 0; background:rgb(255,255,255) } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager Id="ScriptManager1" runat="server" EnablePartialRendering="true"/><!-- Main Page Container --> <div class="page-container"><!-- A. HEADER --> <div class="header"><!-- A.1 HEADER MIDDLE --> <div class="header-middle"> Header-Middle </div><!-- A.2 HEADER BOTTOM --> <div class="header-bottom"> Header-Bottom </div><!-- A.3 HEADER BREADCRUMBS --> <div class="header-breadcrumbs"> Header-breadcrumbs <lmf:Help ID="help" runat="server" /> </div> </div><!-- B. MAIN --> <div class="main">Main Content place holder<!-- B.1 MAIN NAVIGATION --> <div class="main-navigation">main-navigation </div><!-- B.2 MAIN CONTENT --> <div class="main-content">main-content </div> </div><!-- C. FOOTER AREA --> <div class="footer">footer </div> </div> </form></body></html>Ok it seems that when I place the user control inside a <div> that has absolute or relative positioning then it behaves incorreclty.
What im trying to do is this
I have my breadcrumbs and at the far right of the breadcrumbs i want to show a help image. When that image is clicked on it will open the modal popup.
My problem is getting this image positioned in the exact place that i want it to and in trying to do so with positions, i seem to have caused the problems.
If i place the user control in any other div except for the header-breadcrumb <div> then it displays in the upper right hand of the screen because of the position of the div around that image for the help image. When i do this it works correclty. So it looks like im having css issues but im not sure how to solve them. Any ideas?
This is the div the user control is being placed in. (well not in the code above, in the code above the class header-breadcrumbs has the relative position)
<divstyle="position:relative;">
<lmf:HelpID="lmfHelp"runat="server"/></div>
<divstyle="position:absolute; right:0; top:0;">
<asp:ImageButtonID="cmdGetHelp"runat="server"ImageAlign="absmiddle"ImageUrl="/images/icon_help_32px.gif"/></div>
Thanks a lot for the repro. I have updated this workitem with the files:WorkItemId=10693.
We will look into fixing it for our next release.
kirtid,
For my peace of mind, is this a problem with the modal popup control in respect to positioning or is it a problem created by something that im doing?
EDIT: Never mind kirtid. If i would of just clicked on the workitemid i would of seen that you had recreated the problem and submitted the problem.
Thanks.
I have a couple of issues with the modal popup extender control.
1- When the popup shows, any dropdown list on the form behind gets hidden.
2- I can't add vb code (not script) under the buttons on the popup that are selected as either the ok or cancel controls of the popup extender.
3- To get around problem # 2, i didn't specify an ok or cancel button on the extender, and have code i want to run under the _click event of the buttons on the popup panel. The problem with that is, when the popup hides, all my dropdown lists on the base form remain hidden.
So the three problems are related in my scenario.
Thanks
Hi,
the ModalPopupExtender hides the select elements (DropDownList-Controls) when you use an Internet Explorer < 7.0. That is necessary, because the select elements always on top. This behavior is normal.
See my post:http://forums.asp.net/thread/1555265.aspx for your issue 3.
Regards
Marc André
Thanks,
I was able to solve this problem by hidding the popup panel using client side javascript.
Hi Im trying to use a modal popup in my project.
Im generating a bunch of control on my form and some of them (buttons) when clicked should open a modalpopup and on okclick store some info in a db
the problem Im having is that when I am not in the tab with the button that will make the popup open, I see the popup, but when im inside the right tab popup disapear and I can't seem to make it appear.
second problem Im having is that I can't seem to find a way for having multiple button to open the same popup.
hmm Now the modal popup is always shown. maybe its a properpy of the target control or of the popup?
Here is the code
<ajaxToolkit:ModalPopupExtenderID="MPE"runat="server"
BackgroundCssClass="modalBackground"
TargetControlID="test"
PopupControlID="PanelAddLine"
DropShadow="true"OkControlID="SavePrice"
CancelControlID="CancelButton"
>
</ajaxToolkit:ModalPopupExtender>
<asp:PanelID="PanelAddLine"runat="server"CssClass="modal">
Enter the number of Days<br/>
<asp:TextBoxID="TextBoxNbDays"runat="server"></asp:TextBox><br/>
<asp:ButtonID="SavePrice"runat="server"OnClick="SavePrice_Click"Text="Add"OnClientClick="AfterAdd()"/>
</asp:Panel>
<asp:HiddenFieldrunat="server"ID="test"Value="a"Visible="false"/>
well im not sure about the tabbing problem because im to busy right now to try to replicate it myselft, but i think i know whats going on with the problem you have trying to open the same modal popup from different buttons. The targetControlID for a modal popup lets you set a button to open the popup, but because you want more then one button to you should do the following
* Create a hidden field and assign its ID as the targetControlID for the modal popup
* Now for each button you have that you want to open the modalPopup, create an eventhandler for the button with this code inside(example further down)
modalPopup1.Show();
* to programmatically add the event for the button do this
myButton.Click += new EventHandler(this.myButton_Click);
* and then write the click function that will be called due to the above code
private void myButton_Click(object sender, EventArgs e)
{
modalPopup1.Show();
}
thats weird, i guess i cant be much more help, i love doing stuff programatically in C# to im not great with the aspx file sytax when stuff like this happens :(
could it be just a question of css?
Do I have to set special value to my css to make the modal popup work.
Can a master page could possibly be reason for this
hmm Now the modal popup is always shown.
I think you need to call MPE.Hide(); in the server side click event handler of the save button.
Also, don't specify OkControlID="SavePrice"
Greetings,
Sorry to ask such a simple question, but my Modal Popup is working great except that it is popping up offset -- both the popup control and the background.
Are there any instances/tags that would "contain" the popup? I'm assuming this is more of an HTML problem, but assumed the "modal" part of the control would find the entire IE (6.0) window.
Ideas?
Thanks.
Dan
Figured it out myself -- I had the panel to be popped up inside another table, so the modal was acting "inside" that cell. Moved it to the bottom of the page and it works great.
Dan
I have a strange situation in which I am using a Model Popup Control with an embedded GridView containg TextBox controls in a column. I can DataBind the GridView in the codebehind and the TextBox controls are properly populated. However, when the pack posts back, the TextBox Controls always have an empty string for the Text property? This also occurs if I replace the GridView with a Repeater or any other list control.
Other controls, like labels, have there Text property available.
craig
You might want to look at this post:
http://forums.asp.net/thread/1328079.aspx
Look at the second page, at the last post with the JavaScript.
They have done some nice work with the modal regarding this issue I think.
There was also a workaround using the SubmitButtonBehavor = false;
Dont know if this will help you, but I thought I would give it a shot
Good luck
-Shane