4 Replies Latest reply on Apr 9, 2008 8:47 AM by jmccrillis

    How to get flex popup modal dialog to fade entire browser window?

    jmccrillis
      I have a flex app embedded in an html page and within the app I have a need to pop-up some content, in a flex application component. I need the pop-up to fade out the entire html page, however, which the flex pop-up does not do: it fades only the flex app.

      I've seen references to using Javascript and Ajax to accomplish this, but I'm not flex-savvy enough yet to do this. Does someone have an example of doing this or specific suggestions? Thanks!

      Janene
        • 1. How to get flex popup modal dialog to fade entire browser window?
          slaingod Level 1
          You could use an ExternalInterface call to a javascript function that put a div with an alpha transparent image/background color over the rest of the html, but under the Flex app. You can probably just use z-order for that. In your Flex app you would use the same alpha/color/etc. for your popup.

          Generally speaking the div would always be on the page, and the javascript call would simply show it.

          ExternalInterface.call('javascript function name', ... (rest of args));
          • 2. Re: How to get flex popup modal dialog to fade entire browser window?
            jmccrillis Level 1
            Thanks, sg... I'm unclear on how to pass the the flex component to the javascript function to be included in the popup? Obviously from the Flex side it's just a parameter in the ExternalInterface call, but when the javascript function gets it, what is it going to do with it? It's not a type that javascript knows about... unless there's some library/function I'm unaware of (incredibly possible right now! I feel so clueless! )

            Thanks!

            Janene
            • 3. How to get flex popup modal dialog to fade entire browser window?
              slaingod Level 1
              I'm not sure I understand either :)

              My example was meant to show a way to how to implement a modal dialog that crossed the flex-browser boundary. (As far as the fade in/out aspects, you could look into scriptaculous/dojo/etc for how to actually cause an html div (ie. all of your content) to fade.)

              My example points hopefully showed how you could, using ExternalInterface, trigger an overlay div to block user access to the rest of an html page, while at the same time in your Flex app, you would also do the same modal action (display the same color/alpha background for your popup dialog for instance, or trigger fade out at the same time you sent the ExternalInterface fade out command to javascript for the rest of the page).

              It is possible of course, to put your modal dialog in a completely separately embedded SWF/Flex app (could be the same swf, just with a flash var indicating it was the 'dialog slave'). You could use LocalConnection or ExternalInterface to pass data back and forth between the modal 'dialog' swf and the 'master app'. Passing data through javascrip is as easy as toXMLString() or json, or whatever. The 'dialog' swf would be in a hidden div that was made visible by the master applications call to javascript through ExternalInterface.


              For ExternalInterface, say you had a function:

              function MyFadeFunction(fadeoutTimeSeconds) {
              //call some fade out effect here
              SomeFrameworkFadeOutEffect(fadeoutTimeSeconds);
              }

              You would call this from Flex with:
              ExternalInterface.call('MyFadeFunction', 2); // 2 seconds for fade out

              If you just want to show a popup message that covers the screen that isnt too complicated, you could use something like Prototype Windows, a javascript popup class, and have Flex trigger that with a call to your function.

              • 4. Re: How to get flex popup modal dialog to fade entire browser window?
                jmccrillis Level 1
                Thank so much! I'll have a go at this!

                Janene