Alert and Popup modal, transparancy, color and blur changes

Today, I am going to post some thing on Popup custom settings. We can change some properties like Popup modal, transparency, color and Blur.

These properties are of style. This has been a very long avaited request from my designer friends. (especially by : Mandu)

In flex ‘<Application />’ tag has mainly four attributes related to modal properties of pop-ups.

  1. modalTransparency
  2. modalTransparencyBlur
  3. modalTransparencyColor
  4. modalTransparencyDuration

Their default values are “0.5”, “3”, “0xDDDDDD” and “100” respectively. Changes to these properties are applicable to entire application level.

But, we can do same changes to separate components too. ( As I have shown in my example.)

Let me show… in image (1) We can see the default Alert / Popup window of flex

Noraml flex alert / popup customized Flex popup / alert

and in image (2) We can see the customized Alert / Popup window

and in example I have given other two options too check them.

Ya ya, you guys are more eager to see the code. Go ahead…


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
 pageTitle="Alert / Popup / Modal Example : Mayur Rami"
 modalTransparency="0.5"
 modalTransparencyBlur="3"
 modalTransparencyColor="0xDDDDDD"
 modalTransparencyDuration="100" >

<mx:Script>
 <!&#91;CDATA&#91;

import mx.containers.TitleWindow;
 import mx.managers.PopUpManager;
 import mx.core.IFlexDisplayObject;
 import mx.controls.Alert;

private function openPopup(eve:MouseEvent):void
 {
 var titleWin:TitleWindow = new TitleWindow();

titleWin.width = 250;
 titleWin.height = 150;
 titleWin.showCloseButton = true;
 titleWin.addEventListener("close",removePopup);

switch (eve.target.label)
 {
 case 'Pink popup' :
 titleWin.title = "Pink Window";
 titleWin.setStyle("modalTrasparancy",1);
 titleWin.setStyle("modalTransparencyBlur",100);
 titleWin.setStyle("modalTransparencyColor",0xff6789);
 titleWin.setStyle("modalTransparencyDuration",2500);
 break;
 case "Green popup" :
 titleWin.title = "Green Window";
 titleWin.setStyle("modalTrasparancy",0.2);
 titleWin.setStyle("modalTransparencyBlur",5);
 titleWin.setStyle("modalTransparencyColor",0x00ff67);
 titleWin.setStyle("modalTransparencyDuration",1500);
 break;
 case 'Quick popup' :
 titleWin.title = "Quick Window";
 titleWin.setStyle("modalTrasparancy",0.1);
 titleWin.setStyle("modalTransparencyBlur",2);
 titleWin.setStyle("modalTransparencyColor",0xf0f0f0);
 titleWin.setStyle("modalTransparencyDuration",5);
 break;
 }

PopUpManager.addPopUp(titleWin,this,true);
 PopUpManager.centerPopUp(titleWin);

function removePopup():void
 {
 if(titleWin.title.toString() == 'Quick Window' )
{
    titleWin.setStyle("modalTransparencyDuration",5);
}
 else
{
  titleWin.setStyle("modalTransparencyDuration",750);
}

PopUpManager.removePopUp(titleWin);
 }
 }
&#93;&#93;>

</mx:Script>

 <mx:Label text="Experiments with modal popups and same way can be set custom settings for Alert, too." fontWeight="bold" />
 <mx:Button label="Normal Alert" click="mx.controls.Alert.show('Alert !')" />
 <mx:Button id="greenBtn" label="Green popup" click="openPopup(event)" />
 <mx:Button id="pinkBtn" label="Pink popup" click="openPopup(event)" />
 <mx:Button id="quick" label="Quick popup" click="openPopup(event)" />
</mx:Application>

Feel free to share your views regarding this.

Enjoy Flexing… πŸ™‚

Advertisements

26 Responses

  1. Do you know of any way to size the width and height of the modal window? When I launch my projector file and launch a pop-up, the modal ‘background’ doesn’t cover all of my content and is 1/2 off the screen.

  2. Scott,

    Generally, that does not happen in Flex. Because by default model cover entire application ( stage ) of Flex application.

    (Note: This may happen in a case, where you have a .swf file in html file. There you may have this kind of situation. But again modal will be covering stage ( entire swf file ) area. )

    Even if you have same problem regarding this, send me your code snippet I may give you solution.

  3. I get a Syntax error at line 55:

    1084: expecting right paren before src.

    Also, what does the do at line 62? There is no anywhere in the code above.

    thanks
    Declan

  4. Declan,

    It was problem of wordpress to show code.
    But now it has been rectified.

    Thanks for suggestion.

  5. Congratulations for this example !!!

  6. Looks relly skillfully, nice work!

  7. how would I add that to this script, to change it to kool colors…

    alert(“Longsuffering.org – The Greatness all around. xoHUGGSxo”)

    Please help me with this, I will love you forever (probably not true love though) xD

  8. Irish,

    code / snippet for is already given in this post.

    Event though, you can’t get through – let me know your requirements precisely. I will definitely try to give you solution.

    Till then, Enjoy Flexing.

    Mayur

  9. Cool Example.. I noticed that the modal transparency doesn’t fall below 0.5. Is it possible to lower it down to 0?

  10. got it.. i had set modalTransparency for as 0.5 πŸ˜‰

  11. well.. it’s like I thought!

  12. Esto sirve para eliminar el efecto de transparecia en el Alert

    modal-transparency-blur: 0;
    modal-transparency: false;

    • What’s the meaning of ” Esto sirve para eliminar el efecto de transparecia en el Alert ”

      seems, it is in a language other than English, please let me know what you want to say.
      I will moderate and publish the comment.

      Enjoy flexing…

  13. Mayur…i reply in name artanis..his post was in spanish and said something like:

    “The following is useful for eliminating the transparency effect in the Alert.”…

    cheers.

    btw: thx for the tip, just what i was looking for.

  14. These properties dont exist on the application tag of flex 4. So how can you accomplish in flex 4 ? I am go crazy trying to get any Alert styles to work properly in Flex 4.

  15. great post…thanks

    one question..can I show logo while showing progress bar??

  16. Nice Example dude….good work.

  17. It Nice Example ,its helped lot me thanks

    I have one question for you , when open pop up window the background getting white diluted color ,how can i remove
    that ,please help me

    I waiting for your reply ,its urgent

    Advance Thanks

    • you can set some other color than white.
      or
      you can increase / decrease alpha of a modeal
      or
      you can set modal=false.

      Enjoy flexing – feel free to ask questions πŸ™‚

  18. Hi,
    You misspelled style parameter “modalTrasparancy” at lines 29, 36, 43. Need to be: “modalTransparency”.
    TNX for great tip πŸ˜‰

  19. hi mayur,

    nice example. its really helpful.
    please let me know if i can change the reduce the size of background patch

    waiting for reply, its urgent,
    thanks in advance,
    Gauri

  20. hi mayur,

    very nice example.
    i had a query – i need to resize/reduce size of popup background patch is this possible

  21. This post helped me while developing a mobile AIR application. It seems these modalTransparency properties also apply to the context menu popups. Thanks for the example.

  22. Thanks for valuable help..

  23. Hi,
    Im trying to reproduce this effect in a Flex Mobile 4.5 project – specifically the background blur. But it doesnt work the same – no background blur. Any ideas how to make that work?
    thanks!
    Andy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: