Modal popup with scrollbars

by Annie Lagang

HTML

<div id="wrapper">
        <div id="main">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a massa sed eros
            semper fringilla. Donec leo arcu, vehicula in egestas id, vulputate sit amet diam.
            Mauris et urna erat. Nunc eu eros a lacus auctor ultrices ut a sapien. Pellentesque
            ut tortor nisl, in fermentum nisl. Donec ac porttitor eros. Duis nec sapien mi,
            vitae bibendum odio. Quisque iaculis velit eget ipsum bibendum ornare tempus leo
            adipiscing. Phasellus interdum, tortor ac condimentum iaculis, arcu velit fringilla
            quam, tincidunt ultrices metus felis vitae sem. Nunc sit amet lectus mi. Mauris
            at feugiat sem. Praesent sed lacus ante. Donec id augue nec ipsum bibendum aliquet
            eget in ante. Morbi rhoncus venenatis ligula nec faucibus. Suspendisse potenti.
            Quisque fermentum cursus enim tincidunt semper. Sed porta iaculis nunc eget hendrerit.
            Pellentesque mi odio, molestie nec semper vel, ullamcorper vitae lectus. Quisque
            turpis mi, lobortis feugiat tincidunt in, tempor imperdiet tellus. Fusce a sapien
            dolor. Nulla non dui tellus. Phasellus luctus, risus non consequat auctor, ligula
            mauris tristique est, in cursus magna risus id nunc. Aliquam in purus metus. Suspendisse
            feugiat nibh ut leo laoreet gravida adipiscing augue auctor. Aenean eu massa id
            est fringilla eleifend vitae quis nisi. Nulla ac libero a eros accumsan pulvinar.
            Sed rutrum iaculis eros quis facilisis. Praesent a turpis sit amet eros vehicula
            rhoncus. Aliquam erat volutpat. Sed aliquam nisl a massa gravida vestibulum. Sed
            at interdum ligula. Maecenas ligula lectus, accumsan ut facilisis et, scelerisque
            sed dolor. In vitae arcu neque. Vivamus at mi turpis, quis vehicula sapien. Maecenas
            tempor feugiat leo, et ultricies tellus viverra at....

CSS

/*#wrapper
{
    overflow-y: scroll;
    height: 100%;
}

#main
{
    width: 800px;
    margin: auto;
}

html, body
{
    margin: 0;
    overflow: hidden;
    height: 100%;
}*/

.disable-scrolling {
  height: 100%;
  overflow: hidden;
}

.enable-scrolling {
  overflow: auto;
}


/

JavaScript

$(function () {
    $("<div><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p></div>")
            .dialog({ height: "200", modal: true });
    $('body').addClass('disable-scrolling');
});