Show and Hide ModalPopupExtender from JavaScript

Artikkeli
02/20/2007

1) Assign a BehaviourID to the ModalPopupExtender using the BehaviourID attribute.

 BehaviorID ="ModalBehaviour"

2) Use the $find method to get a handle to the Modal Popup Behaviour .

 $find ("ModalBehaviour").

3) Call your hide and show methods on the acquired handle.

4) The Javascript would look like this.

 <script language="javascript"> 

function ShowModalPopup() 
{
  $find("ModalBehaviour").show(); 
}

function HideModalPopup() 
{
 $find("ModalBehaviour").hide(); 
}

</script>

Comments

Anonymous
March 07, 2007
I was having trouble $find()ing my modal popup extender by it's ID. The behaviour ID worked great. THANKS !
Anonymous
March 09, 2007
This just doesn't work. I get null is null or not an object when the find command executes. I did a straight copy of this example, pasted it into my project. I changed the BehaviorID, but other than that its verbatum.
Anonymous
March 10, 2007
Hi Alan, Looks like the FIND Method is failing to get the Behavior. Can you please mail me a sample repro so that I can look into it ? Please Use the contact form . Thanks, Raj
Anonymous
April 04, 2007
I had the same prob getting a "null" handle when doing the $find() during the OnLoad client event - seems that AJAX.NET hadn't finished creating the object at that point. So I did "window.setTimeout(jsMyFunction, 500)" instead and put my $find() in jsMyFunction(). Then it worked ok. Trying to find a neater solution but no joy yet....
Anonymous
April 04, 2007
The comment has been removed
Anonymous
April 12, 2007
Thankyou Thankyou Thankyou, ive just spent 2 days trying to figure this out but your example worked first time for me, did is say thankyou?!
Anonymous
April 13, 2007
Hi Jamie , Glad I could help you out :-)
Anonymous
April 19, 2007
Hi,I am having the same problem.In the pageLoad I am getting null.Any adea?? I have multiple links on a page and I want to use only one panel on each link as popup. Please...thanks,Jayran
Anonymous
April 19, 2007
Hi Jayran, Can you use the Contact form to drop me a sample of your code ? I will look into it to see the issue Thanks, Raj
Anonymous
April 19, 2007
Hi Jayran, Once the ASPX is rendered , can you please do a "View Source" on the Page and give me the "$create" function call for the ModalPopupExtender ? Thanks, Raj
Anonymous
April 19, 2007
Hi Raj, In the viewsource there is no create function for ModalPopupExtender.It has this: (function() {var fn = function() {AjaxControlToolkit.ModalPopupBehavior.invokeViaServer('_modalExt', true); Sys.Application.remove_load(fn);};Sys.Application.add_load(fn);})();Sys.Application.initialize(); where _modalExt is the behaviourId. Am I doing something wrong?? thanks
Anonymous
April 19, 2007
When I added OnOkScript="onOk(null)" to the extender now I got it like this: Sys.Application.add_init(function() { $create(AjaxControlToolkit.ModalPopupBehavior, {"BackgroundCssClass":"modalBackground","CancelControlID":"_btnCancel","DropShadow":true,"DynamicServicePath":"/Trans/Aircraft/forms/form.aspx","OkControlID":"_btnOK","OnOkScript":"onOk(u0027crewu0027);","PopupControlID":"_panelComments","id":"_modalExtComments"}, null, null, $get("_btnCrewComments")); });
Anonymous
April 19, 2007
It seems like if whatever control the TargetControlID points to is hidden (visible='false'), then the modal popup extender is not created. Is it a bug?
Anonymous
April 20, 2007
Hi Saravanan, When you set "visible = false" on a server-Side Control , the control is not rendered. An Extender is supposed to "extend" a control .If the Control is not rendered , what will it "extend" ? To hide a control , set the style attribute to have "display:none". EX: txtSomething.Attributes["style"] ="display:none" ; Hope this helps
Anonymous
April 20, 2007
It makes sense.. but here the ModalPopup is shown during the pageLoad and it not necessarily get attached to any control to invoke it. Click a Button -> Show Modal Popup : Here the button control's click event fires the trigger. So we can say the 'button' is extended. Page Load -> Show Modal Popup: Custom script in pageLoad fires the trigger. No control is needed. No harm of keeping a button with display:none as you said to achieve the purpose, but it will be clean if we have this option too, specifically for this extender.
Anonymous
April 20, 2007
Hi Saravanan, Your requirement seems to have weight . can you please submit a work-item for the same over at codeplex ? The link is http://www.codeplex.com/AtlasControlToolkit/WorkItem/Create.aspx This should help someone who is looking for a similar functionality. and yes, thanks for sharing this with me .
Anonymous
April 25, 2007
I submitted the workitem. Here you go! http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=9861
Anonymous
April 27, 2007
Hi PhaniRajuYN, I got it working with Javascript.Thanks. I have a new problem...need your help.. I have a modal popup with updatepanel.the popup shows search results in a repeater basd on user input. modal popup shows up, without a fliker I get the results but ... If I click cancel the pages dropdown boxes disappear.... even though the popup hides... Any idea?? Thanks.
Anonymous
May 28, 2007
Hi, The apporoach is working fine after the page is loaded. But i want to display the modal pop extender on post back of the page. I am trying to call the javascript function which is being called on body OnLoad event. The Extender object returns null. Is there any way to resolve this kind of situation. Thanks in Advance. Please post any solutions to sekhar.raja@gmail.com Regards, Raja Sekhar.
Anonymous
May 28, 2007
Hi Raja Shekar, Please read My reply to zootius about the same.Its the 5th Comment from the top .basically , its about creating a function called pageLoad() and accessing the extenders there. EX: function pageLoad() { var cachedModalBehavior = $find("ModalBehaviour"); } Hope this Helps! Thanks, Raj
Anonymous
July 02, 2007
The comment has been removed
Anonymous
July 03, 2007
The comment has been removed
Anonymous
September 13, 2007
Hi, I am haing the same problem that Jayran has posted previously. My page has some dropdowns and some buttons. On click event of one of the button, modal popup shows up. It works perfectly. When I am done with the modal popup, I hide it. However, my dropdowns on the main page are disappeared. How can I get those dropdowns back? Please, help!
Anonymous
September 14, 2007
Hello Darcy, When the Modal Popup shows up , it creates an iframe at the same position so that it stands above all the controls. When you hide the control , the iframe is also supposed to be hidden. Strange that this isnt the case with your app. Can you drop me a sample repro using the "Contact Me" link . I will take a look at it.
Anonymous
December 12, 2007
It seems I am having trouble with the JavaScript call. I created the BehaviorID, and I am doing the $find() call in my PageLoad function, but nothing happens. I still have the TargetControlID= to a button, is that correct? Can you please supply me with code that has the JavaScript and ModalPopupExtender? Thanks in advance, Dede
Anonymous
December 23, 2007
Just put .Show() in the _Load function of the .cs file: protected void Page_Load(object sender, EventArgs e) { ModalPopupExtender3.Show(); } [PhaniRaj]
Anosh , Please take a few minutes to read the title of the Post.
It says "how to open MPE from JAVASCRIPT".
Anonymous
June 22, 2008
helloooo.... can any one tell me whats the sloution for getting the drop downs back again Thanks in advance
Anonymous
June 23, 2008
Hi Padma, Please post your question on the atk forums at : http://forums.asp.net/1022.aspx -Phani
Anonymous
July 01, 2008
The BehaviorId was great great great great idea ... saman
Anonymous
July 29, 2008
Thank you for the BehaviorId tip. It worked like a charm. Thank you!!!!!
Anonymous
August 22, 2012
Use Jquery to use the $find() function and Set the BehaviourID in AjaxModalpopupExtender Great. Works Nice.

Jaa

Show and Hide ModalPopupExtender from JavaScript

Comments

Lisäresursseja