CODEWITHSUNDEEP
jquerycss
port5432
port5432

Reputation: 6371

Scrolling jQuery UI modal overlay not scrolling

I'm building a simple modal pop-up dialog box. The basics are working but I would like the dialog box to scroll, using the main page scrollbar to control it.

I'm not sure if this is a jquery issue or a css issue.

The effect I am after is like this: http://www.script-tutorials.com/demos/328/index.php (click on an image and then scroll the outer window scrollbar).

My code is here: 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);

}

I know the example I have given is using the colorbox plugin, but I am hoping this effect is possible with the standard jQuery UI.

jsfiddle:

http://jsfiddle.net/dEzMp/

Upvotes: 0

Views: 3107

Answers (2)

port5432
port5432

Reputation: 6371

I found exactly what I want as a Twitter Bootstrap extension.

http://jschr.github.com/bootstrap-modal/

Upvotes: 0

Morpheus
Morpheus

Reputation: 9065

Add bit of jQuery:

var postop = $('dialog').offset().top;

$(window).scroll(function() {
   $('.dialog').css('top', postop);
});

And change your .dialog div position:

.dialog {
   position: absolute;
}

Upvotes: 1

Related Questions