Loading ...
Sorry, an error occurred while loading the content.

Re: closing modal pop up window by clicking outside window boundary

Expand Messages
  • solarlion07
    Just in case anyone is interested ... here is how we resolved this (I m sure this is super basic to many but others may find this review helpful) _________
    Message 1 of 4 , Sep 29, 2008
    • 0 Attachment
      Just in case anyone is interested ... here is how we resolved this
      (I'm sure this is super basic to many but others may find this review
      helpful)

      _________

      When you create a new modal widget panel, YUI creates a mask layer
      that appends your Panel name with _mask.
      (This information alone should help some folks ;)

      In our case we created a new panel called 'info_layer_popup'

      function show_info_layer_popup(divid) {
      YAHOO.SZ.container.info_layer_popup =
      new YAHOO.widget.Panel("info_layer_popup", {...
      modal:true, ...
      }

      The corresponding mask layer generated is displayed in a div w/
      id="info_layer_popup_mask".

      With that handy piece of knowledge you can use an Event Handler to tie
      a click event (ie. addListener) to that div.

      YAHOO.util.Event.addListener('info_layer_popup_mask', 'click',
      hide_info_layer_popup);

      The function called by event 'click' is hide_info_layer_popup.

      function hide_info_layer_popup() {
      YAHOO.SZ.container.info_layer_popup.hide();
      }

      The modal pop up window now closes when the user clicks off of the window.

      Happy coding.



      --- In ydn-javascript@yahoogroups.com, "D. Wayne Fincher"
      <slowlychillin@...> wrote:
      >
      > Maybe when you pop up the modal panel, you could attached an onclick
      > event to the body directly. Have it check to make sure the click
      > wasn't on the panel and close the panel. Then when the panel is closed
      > the event listener should be removed.
      >
      > It might just work ;)
      >
      >
      > --- In ydn-javascript@yahoogroups.com, "solarlion07" <ds_simba@> wrote:
      > >
      > > Hello,
      > > Right now I have a modal pop up container (via new YAHOO.widget.Panel)
      > > that is being closed by clicking on
      > >
      > > <a class="small" href="#"
      > > onclick="YAHOO.container.info_layer_popup.hide(); return false;">Close
      > > Window</a>
      > >
      > > (serving same function as close: true,)
      > >
      > > I would like the user to be able to simply click outside of the window
      > > area to return to the page below. Any thoughts on how I can
      > > accomplish this? Thank you.
      > >
      > > RGP
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.