Modal Popup Extender - Setting Focus

Hi,

I have HostModalPopup.aspx webform with a ShowModalWindow button (When clicked shows a Modal Popup Window) and there are some text boxes after the button.

The Modal Pop Up window has 3 controls: a text box field, a submit button and a close button.

1) When the Modal Popup window is shown, I would like to be able to setfocus to the textbox. I thought I should be able to do this with document.getElementById('TextBox1').focus() on some event that gets triggered when the modal popup window is made visible, but I could not find any such DHTML event.

2) The taborder/tabindex of the controls in HostModalPopup.aspx, once the ShowModalWindow is opened and closed, no longer works. If I set the focus to one of the textboxes and hit tab the cursor goes to address bar instead of going to a textbox with next tabindex. I am using AJAX Control Kit verion 1.0.10606.0

Any help is greatly appreciated.

- Surya

Use ScriptManager1.SetFocus(TextBox1)

http://www.asp.net/AJAX/Documentation/Live/mref/O_T_System_Web_UI_ScriptManager_SetFocus.aspx

http://msdn2.microsoft.com/en-us/e04ah0f4

Thank you guys!

The ScriptManager.SetFocus did it for the first issue.

-Surya

Modal popup extender postback issue

Hai

I'm using Ajax toolkit modal popup extender to open the popup window, In that window having two buttons, save button save the entered information into database and cancel button close the popup window.When click the save button changes are saved and window remain open, this is my requirement. But when i clicked that save button the informations are saved and popup window is closed.

How i will get my requirement ? Plz help anyone.

kamal...

use Show method of the control object to make it visible

Hi Kama19101980,

If you want to show a window when storing data to database and hide the window as soon as the process finished, I think you should better useUpdatePanel + UpdateProgress. Otherwise(keep the window open after storing the data), we shall use UpdatePanel + ModalPopupExtender.

Now you can put all the inputs inside an UpdatePanel and the Button is set to be the trigger of the UpdatePanel or just inside the UpdatePanel.For example,

<UpdatePanel>controls <Button></UpdatePanel>

When the partial update occurs, we show the ModalPopupExtender. You can do it like this,

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

function BeginRequestHandler(sender, args){
$find("ModalPopupExtender's BehaviorID").show();
}

I hope this help.

Best regards,

Jonathan

Modal Popup Problem

Hi,

On IE7, when Modal Popup Ext popup, there is a black block window instead of modal popup on left top corner. Can anyone tell me what is going on here?

Thanks,

Subin

Im not good writing english..:P

Hi, I have the same problem, I solved removing width and height tag inside the panel im using for modalpopup. Check it !

If problem persist, let me know !

Francisco

Modal Popup Positioning...

Are there any plans to allow the modal popup to be positioned? We are trying to use modal popup as an information window and we don't want it centered on the screen. Just wondering if there is an easy way to change the positioning?

Thanks,
Matt

See closedwork item 518 for some more info.

Modal Popup Window is being closed with every button click

Hello,

I have a weird problem withModalPopupExtender. Every time a press any server sidebutton or link on my modal window themodal window is being closed. Is it normal behavior or I do something wrong ?

I need to implement the following scenario

1. Modal window withuser data is shown on the modal window. There are multiple buttons on the window something like assign location to a user etc….All of them require server side functionality.

Thank you,

Tory

Thank you,

Tory

Hi Tory,

This is expected. ModalPopup closes itself on a full postback - and regular button clicks will cause full postbacks. The solution is to wrap the contents of your ModalPopup inside an UpdatPanel so those other button clicks are just treated as partial postbacks.

Thanks,
Ted

Modal UpdateProgress

Has anyone already developed one of these?

I've got it to work with just an image being centered in the window but I'd like to use a div or iframe to fade the rest of the page.

a div didn't work in IE and the iframe didn't work at all (either firefox or IE).

I have this and its working for me.

<atlas:UpdateProgressID="UpdateProgress1"runat="server"><ProgressTemplate><tablestyle="position:absolute; width:100%; height:100%; z-index:100; background-color:Transparent;"><tr><tdalign="center"><divstyle="width:300px; height:200px;"class="internal"><br/><br/><br/><br/><br/><br/><imgalt=""src="Images/indicator.gif"/> Processing...</div></td></tr></table></ProgressTemplate></atlas:UpdateProgress>

It works in IE and also in FF.

Hope this helps!

Check this one out:

http://www.codeproject.com/useritems/ModalUpdateProgress.asp

Ricardo, I am using yourUpdateProgress code sample for a modal update progress, it is simple and it works well.

Now I want to know how can I have a 'Cancel' button that just stops the request? You see the 'abortButton' seems to reload the orginal request. How could I create my own button for this?

Cheers,
Peter Meadwww.petermeadit.net

Wow,

This is the post that just keeps on giving.

More than a year after you posted this you have solved my problem.

Thanks Ricardo.

Mark

Modal Window

Hi,

Is it possible to open another page which has its own coding (probably using ajax) in a modal window?

There is nothing that prevents that. You'd need to wrap a IFRAME within the ModalPopUp . Personally to avoid any significant issues... I would use a dynmic control loading to load a control that has no other purpose than creating a iframe and accepting the page to load in that iframe. This would allow still a button in the Modal that would allow you to close (you will not be able to close the modal through the page in the Iframe without some heavy scripting).

Another apporach is to convert what you consider a page into a custom user / web controls and place them in the modal. (which is the technique I use)...

If you use the first option you'll probably want to dispose of the control that holds the iframe after closing the Modal however...

So direct answer is yes. But if you are looking for the ability for the page to interact with the main page then - you'll definately run into some coding issues...

Thanks i am running in a iframe right now so i just need to rap it up with the modal window thingy. and i need to find the code to close the modal but i havent looked at the codes yet so ill let you know how it will come out.

modal window (asp.net ajax page) not closing

Hello, I'm creating a pop up using 'window.showModalDialog', the page that opens is a asp.net ajax page. I'm displaying a gridview on this. When user selects a row from the gridview, i need to store the selected value to session variable and close the popup window. I'm using the below code on the select image button click. If i manually closes the popup window, it get backs to the parent. The code on click event is

ProtectedSub OnSelect(ByVal senderAsObject,ByVal eAs CommandEventArgs)

Dim strScriptAsString ="<script language='javascript'>window.returnValue='" + retVal +"';window.close();</script>"

If (e.CommandName.Equals("cmdSelTag"))Then

Session(Utility.Constants.SelectedTagDefinitionId) = e.CommandArgument.ToString()

IfNot ClientScript.IsStartupScriptRegistered("clientScript")Then

ClientScript.RegisterStartupScript(GetType(Page),"clientScript", strScript)

EndIf

EndIf

EndSub

Note: If make it asp.net page rather than asp.net ajax page, then this works fine.

Any help is appreciated.

Hi.. i used ScritManager.RegisterStartupScript instead of ClientScript.RegisterStartupScript. Now its working.

Modal window with update panel stops working after its shown and hidden once

I'm having some trouble with the modal window tool. It behaves perfectly the first time i show it, and the first time I hide it, then although the updatepanel postback behaviour still works (and the text field in the example below is still updated) the modal window doesn't fire the onOkScript or hide as it does the firsttime.

Does anyone have any ideas?

<div><asp:LinkButtonID="lbCommunityProfile"runat="server">Community Profile</asp:LinkButton></div><atlas:UpdatePanelID="updatePanel2"runat="server"Mode="Always"><ContentTemplate><asp:LabelID="lTest"runat="server"Text="NoneSet"></asp:Label></ContentTemplate></atlas:UpdatePanel><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="lbCommunityProfile"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"onOkScript="__doPostBack('ctl00$ContentPlaceHolder$lbCommunityProfile','');alert('go');"CancelControlID="CancelButton"/></atlasToolkit:ModalPopupExtender><asp:PanelID="Panel1"CssClass="modalPopup"runat="server"><atlas:UpdatePanelID="updatePanel1"runat="server"Mode="Conditional"><ContentTemplate>

This is panel 1

<asp:TextBoxID="tbTest"runat="server"></asp:TextBox><asp:ButtonID="OkButton"runat="server"Text="OK"OnClick="OkButton_Click"UseSubmitBehavior="false"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></ContentTemplate></atlas:UpdatePanel></asp:Panel>

and in the aspx.cs file

protectedvoid OkButton_Click(object sender,EventArgs e)

{

string str = tbTest.Text;

lTest.Text =

"set" + tbTest.Text +"end";

}

Also just wondering what the javascript is to close a modal window. I understand you can use the ok and cancel buttons. I'd like to have a x in the top right of my window and have that close.

Is this with the June CTP of Atlas?
yes the most recent ctp

yes the july ctp

The June CTP is currently (this may change very soon) the most recent Atlas release. It has a problem whereby UpdatePanel updates under Firefox break all extenders. It sounds like you're hitting this problem. Atlas is aware of it and should have a new release out soon to correct the problem. Thanks for your patience!

Just wondering if any progress has been made on this topic?

The July CTP of Atlas fixes the problem mentioned above.
I am experiencing this problem with the July CTP. Appears to notnecessarilybe fixed. I've got a lot of other things goin on in the same page... I'm going to try and issolate the issue.

Modal window underneath flash graphic

I have a popupmodal window that has quite a bit of info in it. It's the full lenght of the page, but it appears underneath the flash header that's at the top of the page, but over top everything else on the page. Here is the code for the flash file. Anyway to get the popup to be on top of the flash graphic?

<embedsrc="~images/top_banner.swf"width="100%"/>

Thanks!

Hi, you'll have to add a the wmode attribute to you html, because flash movies - by default - are drawn as topmost window objects in any browser.

The following html will do the trick:

<embedsrc="~images/top_banner.swf"width="100%"wmode="opaque"/>

--Victor

Perfect thanks!

ModalPopup

hi guys,

I copied the tool kit dll and I tried the modal popup. I made it work but the modal window is displayed somewhere on the right hand side corner and only cancel button is visible. How can I make it to be displayed in the center?

Second, how can I make the window to be disabled when the poup is shown? please advice. Thanks a lot!

here is the html code:

<atlasToolkit:ModalPopupExtenderID="ModalPopupExtender"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="LinkButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"/></atlasToolkit:ModalPopupExtender>

<

divstyle="display:none;"><center><divID="Panel1"class="modalPopup">

POP UP

<asp:Buttonid="OkButton"runat="server"text="OK"></asp:Button><asp:Buttonid="CancelButton"runat="server"text="Cancel"></asp:Button></div></center</div>

<

asp:LinkButtonid="LinkButton1"runat="server"text="Click here to view modal popup"></asp:LinkButton></p>

Please help! Also is there anay way when I click on the linkbutton, perform somejavascript that populates the popup window content?

Thanks lot!

Hi

Can you make sure you have the correct css in place e.g

/*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;
}

This should make it dispkay correctly.

HTH

As for your second question you could have script such as

function SetModalContent()

{

$('Panel1').innerHTML = "YOU CONTENT HERE";

}

and then just add the call to this function on your linkbuton.

I have the same problem. But my popupbox is shown in the upper left corner.

I have copied the code and the css, but I still have this problem.

And the background is doesn't change color when the popup is shown.

I have downloaded all the ATLAStoolkit examples. If I run that code modalpopup works as it should.

I think I have missed a little thing but what ?

Sorry - I solved the problem myself.

For som reason I had a space between ! and DOCTYPE in<!DOCTYPE ...

can you send me the html part of your code?

There is a bug in the ModalPopup JS that causes it to popup in the top left corner of the screen if the doctype is incorrect or if no doctype is used. The solution to this problem is posted here

http://forums.asp.net/thread/1322436.aspx

Just replace the javascript and rebuild the AtlasControlToolkit project.

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 - Multiple Controls open 1 popup?

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>

ModalPopup and Frames of ModalDialog - not at complete WIDTH ?

Hi, I've got a simple (I hope) problem with ModalPopup. It seems like the Frame of ModalPopUp window is not render with full width.

Check this picture please:

http://www.picspirate.com/links/modalpopup-bug

Could somebody help me please ?

This seems to be an issue with the backgroundcssclass and the size you set it. Since the target control is usually a panel, it is rendered out as a div, wich can overlap its container object, so the backgroundcssclass needs to have the desired width defined as well.

Thank you ! That was it

ModalPopup and empty Listbox

I'm running into an issue where I have an empty listbox within a ModalPopup window. For some reason, the Listbox shows up with an XX appearing in it. The XX is not a ListItem as it is not selectable and can't be edited or removed via code. I even tried to add a ListItem and then clear the Listbox, but clearing the ListBox results in the XX showing up again.

Has anyone else run into this? Is this a known bug? Any workaround?

Thanks in advance,

Matt

I had a similar issue: I tried to put an asp:Button control in a ModalPopup and assign a method to it - it appeared, but didn't perform the desired code. Instead I tried a plain-ole HTML button control and assigned a javascript function similar to what I wanted it to do and it worked.

Later, on ScottGu's blog,he posted the new release of the toolkit and in the post there was mention of the Modal having some updates/fixes performed to it, specifically in regard to positioning, however, I thought I saw somewhere something about the use of server side controls. Hmm... I'll keep looking and update you if I find more.

In the interim, are you able to use a client-side listbox and see if that resolves anything? Or does your LB need to be databound or what? Can you show us some code to see if we can spot anything simple that you may have overlooked (as we all do at times)?

regards,
(bs.)

Thanks for the reply. The listbox does need to be databound in certain circumstances, so the client-side won't work.

Strange, though ... noticing the 'XX' in FireFox 1.5 but not in IE or FF 2.0. Grrrrrrrrrrrrrr ......

Hi,

I tried it on FF 2.0.0.4, this problem still exists. It's hard to tell the exact cause, but you can solve it by adding an item to it when there is no items in the list.

For example:

function pageLoad()
{
var list = $get("ListBox1");

if(list.options.length < 1)
{
list.options.add(new Option(""));
}
}

Hope this helps.