Making a popup and greying out the rest of the screen

Posted on 2008-11-20
Last Modified: 2012-05-05
Hi all,
I've seen a new trick used alot on the web and its very effective. Im notsure what its called but it does the following:
- When a user clicks something a popup window or box appears in the center of the screen.
- The popup stands out becaue the rest of the page is greyed out and the page elements cant be clicked.
- To proceed and get back to the main interface, the user must click a button on the popup. E.g. close, confirm, cancel.

I've been trying to find an example but cant remember where i saw it.
Is there a component or something to do this type of thing?

Question by:osion
    LVL 47

    Accepted Solution


    Expert Comment

    Thats it!!
    thanks a million. Been digging around for that for ages!! thats even better than the one I saw.
    Thanks again!

    Author Closing Comment

    Legend! Thanks!

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now