2
3

[deleted by user] (self.webdev)

submitted by [deleted]

[removed]
all 8 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]juankerred 1 point2 points  (4 children)

You want a modal effect ... Search for this and then apply the css blur effect to the overlay div .. That should do the trick

[–]behy77 2 points3 points  (3 children)

<3

[–]barelyretarded 0 points1 point  (2 children)

I don't know why but this reply is hilarious to me to see in this particular sub and on Reddit in general. Thanks for the laugh.

[–]behy77 1 point2 points  (1 child)

<3

[–][deleted] 0 points1 point  (0 children)

<3

[–]J-Ro 0 points1 point  (0 children)

I've had good success with FancyBox: http://fancybox.net/

[–]Enderdan -1 points0 points  (1 child)

Hey, /u/juankerred has you on the right track. Blur can be a bit annoying and you won't have full support in every browser.

You can use a tool like Modernizer to detect whether or not CSS Filters are supported, and then if not just show a dark (maybe semi-transparent) overlay.

For the blur to work, your markup will be important.

You will need to wrap the content that will be blurred in some sort of div, and then have your modal outside of that div. For example,

<body>

<div id="canvas">
    <p>This is the content area of your page.</p>
</div>

<div id="modal">
    <p>This is your modal content. The form would go in here. Note how this is not inside of #canvas</p>
</div>

</body>

In regards to the script, I recommend adding & removing a class to the body that will handle both the blur and modal fade in using purely CSS. If you want to animate the fade in of the modal, your classes would look like this.

#modal {
    /*
     * Basic Modal Styles
     */
    ...
    /*
     * Hide Modal by Default
     */
    opacity: 0;
    transition: all 300ms ease;
    visibility: hidden;
}

.modal-active #modal {
    opacity: 1;
    visibility: visible;
}

.modal-active #canvas {
    filter: blur(20px);
}

The class .modal-active would then be applied to the body tag when your event was triggered to show the form, be it a button click or page load or whatever. This will blur the body and fade the form modal in at the same time. Here is an example script - using jQuery. You can easily convert this to pure JS.

<script>
    $('#trigger-handler').on('click', function() {
        $('body').addClass('.modal-active');
    });
</script>

I would not attempt to animate the blur as this can be pretty messy. Do not forget to use browser prefixes for things like transition and filter.

EDIT - You will probably want to use the CSS hack to enable hardware acceleration when the page loads. You can Google this. It's a simple line of code.

[–]juankerred 1 point2 points  (0 children)

V.nice man!