When I wanted to take control over the shield that makes a window appear modal, I found out, that it seams to be not really implemented. I’ve found the functionality in the mx.managers.PopUpManagerImpl class in the Flex framework.
There is a property called modalWindowClass that if you set, it will be used as a shield.(Actually the graphics object of this class will be cleared even that time, there is a little mess in the code in the PopUpManagerImpl class.)
I did a little repair, with this it works beter for me. I avoid to draw to the graphics object when the class is set. I added a condition:
466 467 468 469 470 471 | if(!modalWindowClass){ g.clear(); g.beginFill(c, 100); g.drawRect(s.x, s.y, s.width, s.height); g.endFill(); } |
The application code:
466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300" applicationComplete="init();"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.managers.PopUpManager; import mx.managers.PopUpManagerImpl; import mx.core.mx_internal; use namespace mx_internal; private function init():void{ var impl:PopUpManagerImpl=PopUpManagerImpl.getInstance() as PopUpManagerImpl; impl.modalWindowClass=CustomPopUpShield; } private function openPopUp():void{ Alert.show("hehe","Try pop up"); } ]]> </mx:Script> <mx:Style> /*With these settings I practically turned off the default behavior. The transparency have to be 1, because it will be the transparency for the whole shield.(with 0 we would not see anything)*/ Application{ horizontalGap:"0"; modalTransparency:"1"; modalTransparencyBlur:"0"; modalTransparencyColor:"#ffffff"; modalTransparencyDuration:"0"; } </mx:Style> <mx:HBox horizontalGap="0" height="100%"> <mx:VBox width="60" height="100%"> <mx:Button label="Click!" click="openPopUp()"/> <mx:Button label="Click!" click="openPopUp()"/> <mx:Button label="Click!" click="openPopUp()"/> <mx:Button label="Click!" click="openPopUp()"/> <mx:Button label="Click!" click="openPopUp()"/> <mx:Button label="Click!" click="openPopUp()"/> <mx:Button label="Click!" click="openPopUp()"/> </mx:VBox> <mx:Canvas width="240" height="100%" backgroundColor="#0000ff"> <mx:Button x="102" y="47" label="click" click="openPopUp()"/> </mx:Canvas> </mx:HBox> </mx:Application> |
The custom pop up shield class (The target is to make the buttons unclickable of course, but over the left side I don’t want to see visible shield. Not the whole screen will be filled with color. I made the shield animated too):
466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 | package { import flash.display.Sprite; import flash.filters.BlurFilter; import flash.filters.GlowFilter; import flash.geom.Rectangle; import gs.TweenMax; import gs.easing.Back; import mx.core.Application; public class CustomPopUpShield extends Sprite { private var _base:Sprite;//this will be an invisible shape over the whole screen to prevent clicking on the buttons private var _animatingContent:Sprite;//this will animate override public function CustomPopUpShield(){ super(); var sc:Rectangle=Application.application.screen; _base=new Sprite(); _base.graphics.beginFill(0x000000,0); _base.graphics.drawRect(0,0,sc.width,sc.height); _base.graphics.endFill(); this.addChild(_base); _animatingContent=new Sprite(); _animatingContent.graphics.beginFill(0x00ff00,0.4); _animatingContent.graphics.drawRect(60,0,sc.width,sc.height); _animatingContent.graphics.endFill(); this.addChild(_animatingContent); var filter:GlowFilter=new GlowFilter(4,4); _animatingContent.filters=new Array(filter); activate(); } private function activate():void{ TweenMax.to(_animatingContent, 1, {tint:0x000000,yoyo:true,ease:Back.easeIn}); } } } |
The result:
Everything is hardcoded in this example. You may need to manage resizing etc. But you can make this way your very own pop up shield, whatever you want.
Source for this project: CustomModalWindowBackground.zip
