Tutorial: Simple grey out screen effect with jQuery

Grey out screen is done previous in JavaScript. But jQuery has became so powerful in reducing the number of codes required that makes me wanted to try how well this can be done using it. Personally, i wanted to check out how easy it is to create a grey out screen with a pop out box at the center of the screen. This is purely for the sake of exploring and experiencing how simple can a grey out screen be done in jQuery.

The Objective

The objective of this article is to produce a simple grey out screen effect in jQuery with the minimum amount of code required. Of course, this is just the goal. But let's see how simple and easy this can be done with minimum amount of codes and maximum completeness.

The Requirement

Here are the following requirement for this simple tutorial

  • Basic CSS, HTML, jQuery Knowledge
  • Read what is written!

6 thoughts on “Tutorial: Simple grey out screen effect with jQuery

  1. Awesome tutorial, really easy to follow and yields amazing results! If you'd be interested, I'd love to hold an interview with you on my web 2.0 blog. Just let me know if you're interested

  2. I have my page divided into multiple sections with input fields in each section. Is it possible to gray out one or more sections instead of the entire screen? My requirement is that based on some user roles, they can edit some sections.

  3. it's definitely possible. just create an 'outer' div block and place the 'screen' div block into the 'outer' div block. Set the position of outer div block to 'relative'. although 'screen' has position absolute, it will only grey out on the area within your section.

  4. This is fantastic! I love the simplicity of the code. The only bug is that when you maximize the screen the grey out doesn't dynamically expand to fit the screen and the result isn't too pretty. Any fix for this?

  5. Hey matt! I heard your call! LOL! The problem is with the css declaration that was changed from 'absolute' to 'fixed'. Therefore, what you have to do is just call the method again! I have updated the article for you 🙂

Comments are closed.