Show and Hide ModalPopupExtender from JavaScript

Show and Hide ModalPopupExtender from JavaScript

  • Comments 31

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> 
Leave a Comment
  • Please add 3 and 4 and type the answer here:
  • Post
  • I was having trouble $find()ing my modal popup extender by it's ID. The behaviour ID worked great. THANKS !

  • 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.

  • 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

  • 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....

  • Hi Zootius,

    In the JavaScript code, there is a pageLoad method which will be called automatically by the ASP.NET AJAX script library.

    This is called after all the framework scripts and components are intialized.

    An example would be ,

    function pageLoad()

    {

    var cachedModalBehavior = $find("ModalBehaviour");

    }

    Hope this helps.

    Thanks,

    Raj

  • 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?!

  • Hi Jamie ,

    Glad I could help you out :-)

  • 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

  • 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

  • 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

  • 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

  • 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(\u0027crew\u0027);","PopupControlID":"_panelComments","id":"_modalExtComments"}, null, null, $get("_btnCrewComments"));

    });

  • 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?

  • 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

  • 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.

Page 1 of 3 (31 items) 123