Display modal DIV over darkened page

Question

I have a page where users fill out a form. Multiple textboxes, dropdowns and checkboxes, etc.

When the user clicks on a particular textbox within the page, I need to darken the screen and pop up a dialog with a list of checkboxes and OK and Cancel buttons. When the user clicks OK, it will take the text values from the checked checkboxes, close the pop up, lighten the main page again and write the checkbox text to the textbox that was clicked, in comma-separated string format.

The biggest issue I'm having is with the modal popup div code. I'm sure I can figure out the checkbox/textbox functionality just fine, but I've been unable to get the popup working correctly.

Does anyone have any simple way of doing this? Currently, before I started messing with this, I just have a simple form with all the input controls.

Answer 1

The easiest way to do this is by using jQuery UI. It has a "Dialog" interface which is pretty handy and easy to implement.

If on the other hand you'd rather doing it by hand, then that's a different story:

• Create a DIV that it's just a black fixed box (position: fixed) that would cover the page. This will be your background. Make sure it's not visible at first (set display: none)

• Make another fixed DIV that would display your dialog. Style it so that your dialog will be displayed at the center of your browser window.

• Using Javascript (or jQuery for extra effects), make both your black DIV and dialog DIV appear when your button is clicked.