How to blur the background when an alert is showing?

Question

I would like to apply a blur effect to the existing view when an alert is shown on the screen, and I am currently doing this by displaying an imageView (BlurEffect:blurBackGroundSignUp) on top of my view, hiding it initially and showing it when calling the following code:

[self BlurEffect:blurBackGroundSignUp];

The BlurEffect method works as I get a blurred view when I put the code in the ViewDidLoad method, but when I check for an alert or add the code to where I am displaying the alert it refuses to show. I am guessing there is something that needs to be overridden and I do not know how to do this.

Answer 1

In short, there's nothing in UIAlertView that would prevent the image view with the blurred image from showing up. So it's likely to be something simple.

You will have to do some diagnostics to identify the source of the problem. The problem could be the snapshot itself. So pause execution at the point where the snapshot is created, hover over the UIImage variable which holds the blurred snapshot, click on the "Quick Look" button (looks like an eye; ), and confirm that the blurred image looks correct:

The next thing is to check to make sure the image was added to an image view and that the image view added to the view hierarchy. You can continue execution of the app and then hit the view debug button :

Or you can run the app, hit the "pause" button, and at the (lldb) prompt enter po [[UIWindow keyWindow] recursiveDescription]. (You may want to temporarily pause the show of the alert view so we can focus on the other views in the view hierarchy). Anyway, you should see something like:

(lldb) po [[UIWindow keyWindow] recursiveDescription]
<UIWindow: 0x7fb45e3247a0; frame = (0 0; 375 667); gestureRecognizers = <NSArray: 0x7fb45e3324c0>; layer = <UIWindowLayer: 0x7fb45e337db0>>
   | <UIView: 0x7fb45bc36520; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x7fb45bc362c0>>
   |    | <UIButton: 0x7fb45bc2f0c0; frame = (313 28; 46 30); opaque = NO; autoresize = RM+BM; layer = <CALayer: 0x7fb45bc2f660>>
   |    |    | <UIButtonLabel: 0x7fb45bc44cb0; frame = (0 6; 46 18); text = 'Button'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7fb45bc44c50>>
   |    | <UILabel: 0x7fb45bc36870; frame = (16 66; 343 581); text = 'Lorem ipsum dolor sit ame...'; opaque = NO; autoresize = RM+BM; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7fb45bc36d40>>
   |    | <_UILayoutGuide: 0x7fb45bc38b30; frame = (0 0; 0 20); hidden = YES; layer = <CALayer: 0x7fb45bc32a40>>
   |    | <_UILayoutGuide: 0x7fb45bc39780; frame = (0 667; 0 0); hidden = YES; layer = <CALayer: 0x7fb45bc398b0>>
   |    | <UIImageView: 0x7fb45bf760e0; frame = (0 0; 375 667); opaque = NO; userInteractionEnabled = NO; tag = 42; layer = <CALayer: 0x7fb45bf77db0>>

Note, you'll notice in my first screen snapshot, I temporarily added a tag number to the blurredImageView. The reason I do that is that it makes it easier to find the view in question in the view hierarchy shown above (it's the last line, the one that included tag = 42). Anyway, confirm that the image view containing the blurred image is in the view hierarchy, with a reasonable frame and not hidden behind anything.

Answer 2

To get the solution for this follow the simple step mentioned below :

For Blur effect just set as a background a whitecolorimage.php 60% transparent.

Also set the 'main' text transparent and set an initial '0px' blur:

color: transparent; text-shadow:0px 0px 0px #000;

In Flex Application

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

modalTransparency
modalTransparencyBlur
modalTransparencyColor

Set these property to like :

 modalTransparency="0.5"
 modalTransparencyBlur="3"
 modalTransparencyColor="0xDDDDDD"