I am currently in the process of creating a modal pop-up dialog box. Everything is functioning as expected, but I would like to incorporate scrolling functionality within the dialog box controlled by the main page scrollbar.
At this point, I am unsure whether this issue pertains to jQuery or CSS.
The desired effect can be seen here: (simply click on an image and then scroll using the outer window's scrollbar).
For reference, you can find my code below: https://gist.github.com/sfcarroll/4739040
CSS:
#overlay {
bottom: 0;
display: none;
left: 0;
margin-right: auto;
margin-left: auto;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 100;
}
#blanket {
background-color: white;
bottom: 0;
display: block;
opacity: 0.8;
position: absolute;
top: 0;
width: 100%;
}
.dialog {
background: white;
border-radius: 10px;
display: none;
margin: 100px auto;
position: relative;
width: 700px;
height: 2000px;
padding: 40px;
border: 1px solid #F7F5F5;
box-shadow: 0 2px 20px rgba(34, 25, 25, 0.5);
}
The example provided utilizes the colorbox plugin, however, I am hopeful that achieving this effect is possible with standard jQuery UI components.
jsfiddle: