HTML modal dialog overflow

Question

I'm working on a website, which will present a modal dialog when a button was clicked. I would want the background to not be scroll-able however the dialog is scroll-able, here is my code on JSFiddle . I'm thinking the dialog should be embedded inside another div which's overflow is set to auto however that didn't work. Any solutions.?

UPDATE

From this image, I want the red area to be scrollable while keeping the green area not scrollable.

Answer 1

I believe I was able to get the functionality you're trying to achieve. It seems like what's making this difficult for you is you're trying to have one scrollbar span multiple elements on the page and there's no element in the markup to apply that CSS rule to. Just wrap all the elements you want to be scrollable in a container and set that container to overflow: auto (and remove the overflow rule from the other elements).

Edit

Based on the comments below I've updated the fiddle. Same idea as before, but now the scrollable wrapper is the body itself. Only gotcha here is your CSS on the dialog was position:fixed , but it stands to reason you won't be able to scroll through content that is positioned relative to the viewport.

Fiddle

Answer 2

I understood that the issue is how to make the header of the modal dialog extend vertically with a scrollbar instead the whole thing.

If that is the case, the overflow approach is the right one; however, overflow itself does not do the trick alone. Overflow likes having friends like width and height around :)

So, in your case, you want a vertical overflow - overflow-y therefore.

And overflow-y needs a height to work. And the height of your header probably will be 55px (this is something you have to decide).

So. Add CSS to the title:

#dialog #title {
    overflow-y: auto;
    height: 55px;

}

Fiddle: http://jsfiddle.net/HectorWasHere/6gFSV/1/