Hiding a Popup Panel with JavaScript

Had a instance where I needed to close the Popup Control with JavaScript

   1:  <ajax:PopupControlExtender ID="pceShowPanel" runat="server"
   2:      TargetControlID="showPanel"
   3:      PopupControlID="popupPanel" 
   4:      BehaviorID="popupBehavior"                 
   5:      />

So with that on your page just hide it with hidePopup().

   1:  function Hide(){
   2:      $find('popupBehavior').hidePopup()
   3:  }

Of course you can show the popup as well with the showPopup() method. The real trick here is the $find shortcut method. The FindComponent method does just that and get's the component in this case the PopupExtender and allows you to call the methods associated with that control.

4 Comments

  • Kevin,

    I am trying to find a way to toggle a panel open and closed using the PopupControlExtender. I am not having any luck. If I set the TargetControlId to a hidden control and try to use showPopup() and hidePopup() in a javascript function called by clicking on an imageButton nothing happens.

    Do you have any insight into this. I think I could make this work with the ModalPopupExtender, except I don't want the popup panel to be modal.

    Mark
    mluhring@yahoo.com

  • I'm trying to issue the $find('popupBehavior'); command in the Google Chrome console, and it can't find anything.

    I've also tried to issue similar commands from other posts, but the objects just can't be found.

    Any ideas?

  • aWqS8C Im obliged for the blog article. Want more.

  • With havin so much written content do you ever run into any issues of plagorism
    or copyright violation? My blog has a lot of completely
    unique content I've either authored myself or outsourced but it looks like a lot of it is popping it up all over the web without my agreement. Do you know any solutions to help prevent content from being ripped off? I'd certainly appreciate it.

Comments have been disabled for this content.