Execute javascript after modal popup is shown... RSS

• • Reply
  

  celoftis

  Member

  56 Points

  355 Posts

  Execute javascript after modal popup is shown...

  Nov 03, 2010 07:09 PM|LINK

  Using ASP.NET 2.0, VB code behind,

  I am using a ModalPopupExtender to show some dynamic content on my site inside an update panel. The problem I am having is that sometimes the content stretches the modal pop-up panel (div) so that it flows off the screen.

  In cases where the height of the popup panel exceeds some defined height I would like to limit the height and add a vertical scroll bar (otherwise the panel should have no height minimum).

  I have written a JavaScript to perform this task (see below).  I use my code behind to display the modal popup... so now my problem is how (when) do I kick-off my javascript to limit the height of my modal popup. Kicking off the script on pageLoaded finds that the popup container's display setting has not been set yet, therefore ConstrainPanelHeight is never executed...

  QUESTION - how can I kick off my javascript after the model popup is shown?

  var POP_UP_CONTENT_HEIGHT_LIMIT = 400;
          function ConstrainPanelHeight(objPanel) {
              var _Panel = document.getElementById(objPanel);
              if (_Panel) {
                  if (_Panel.clientHeight > POP_UP_CONTENT_HEIGHT_LIMIT) {
                      _Panel.style.height = POP_UP_CONTENT_HEIGHT_LIMIT + "px";
                      _Panel.style.overflow = "auto";
                  }
              }
          } //end ConstrainPanelHeight

  
  
  

          var prm = Sys.WebForms.PageRequestManager.getInstance();
          prm.add_pageLoaded(pageLoaded);
  
          function pageLoaded(sender, args) {
              setBodyHeightToContentHeight();
  
              // If pop-up container is visible, ensure that it is < POP_UP_CONTENT_HEIGHT_LIMIT pixels tall
              var popup_container = '<%= Me.pnlCreateProblemConfirm.ClientID %>';
              if (popup_container) {
                  var objPopup_container = document.getElementById(popup_container);
                  if (objPopup_container) {
                      if (objPopup_container.style.display && objPopup_container.style.display != 'none') {
                          ConstrainPanelHeight('<%= Me.pnlCreateProblemConfirm_Body_Container.ClientID %>');
                      }
                  }
              }
          }

  
  
  

  
  

  
  

  JavaScript Modal Popup extender

• • Reply
  

  karan@dotnet

  All-Star

  26228 Points

  4596 Posts

  Re: Execute javascript after modal popup is shown...

  Nov 03, 2010 07:29 PM|LINK

  Try Like this:

  ScriptManager.RegisterStartupScript(this, this.GetType(), "MyKey", "YourJSFunction();", true);

  
  
  

  Thanks,
  Karan
  
  ~ Blog ~
  
  Remember To Mark The Post(s) That Helped You As The ANSWER
• • Reply
  

  celoftis

  Member

  56 Points

  355 Posts

  Re: Execute javascript after modal popup is shown...

  Nov 04, 2010 12:40 AM|LINK

  Yes, that will kick off the script but will will it execute before or after the modal popup is displayed? 

• • Reply
  

  celoftis

  Member

  56 Points

  355 Posts

  Re: Execute javascript after modal popup is shown...

  Nov 04, 2010 02:25 AM|LINK

  I ended up doing this to solve my problem:

  <script type="text/javascript">
          var POP_UP_CONTENT_HEIGHT_LIMIT = 400;
          function ConstrainPanelHeight() {
              var _Panel = document.getElementById('<%= Me.pnlContent.ClientID %>');
              if (_Panel) {
                  if (_Panel.clientHeight > POP_UP_CONTENT_HEIGHT_LIMIT) {
                      _Panel.style.height = POP_UP_CONTENT_HEIGHT_LIMIT + "px";
                      _Panel.style.overflow = "auto";
                  }
              }
          } //end ConstrainPanelHeight
          
  
          // Attach a handler to the load event.
          Sys.Application.add_load(applicationLoadHandler);
          function applicationLoadHandler() {
              var mpePopup = $find('mpePopup');
              if (mpePopup) {
                  mpePopup.add_shown(ConstrainPanelHeight);
              }
          } //end applicationLoadHandler
      </script>

  
  
  

  • Marked as answer by celoftis on Nov 04, 2010 02:25 AM
• • Reply
  

  wwward

  Member

  51 Points

  13 Posts

  Re: Execute javascript after modal popup is shown...

  Mar 02, 2012 06:19 AM|LINK

  I know this is an old thread, but for those who end up here like I did, I'll share how I've been calling JS when ModalPopupExtender is shown.  I use a ScriptAction animation to call my JS function.  I like this because I don't have to wire up the onload event, and it just seems easier to understand.

  <ajaxToolkit:ModalPopupExtender
                  ID="ModalPopupExtender2" runat="server"
                  TargetControlID="lnk_OpenGame"
                  BackgroundCssClass="modalBackground"
                  CancelControlID="lnk_ClosePopup"
                  PopupControlID="Panel1"
                  BehaviorID="SilverPracticeBehaviorID"  >
              <Animations>
                <OnShown>
                   <ScriptAction Script="InitializeGame();" />
                </OnShown>
              </Animations>
  </ajaxToolkit:ModalPopupExtender>

• • Reply
  

  UjjwalMeshra...

  Participant

  1179 Points

  293 Posts

  Re: Execute javascript after modal popup is shown...

  Mar 16, 2012 09:58 AM|LINK

  wwward

  I know this is an old thread, but for those who end up here like I did, I'll share how I've been calling JS when ModalPopupExtender is shown.  I use a ScriptAction animation to call my JS function.  I like this because I don't have to wire up the onload event, and it just seems easier to understand.

  <ajaxToolkit:ModalPopupExtender
                  ID="ModalPopupExtender2" runat="server"
                  TargetControlID="lnk_OpenGame"
                  BackgroundCssClass="modalBackground"
                  CancelControlID="lnk_ClosePopup"
                  PopupControlID="Panel1"
                  BehaviorID="SilverPracticeBehaviorID" >
              <Animations>
                <OnShown>
                   <ScriptAction Script="InitializeGame();" />
                </OnShown>
              </Animations>
  </ajaxToolkit:ModalPopupExtender>

  Yes this is old thread. But by replying on this old thread you saved my life. Your answer worked for me.

  Thanks wwward

  When a eye with Vision and a heart with passion achieves his dream people call him genius.
  
  Regards