Permalink
Browse files

- Add scroll observers to ensure that Modalbox is fixed in a static p…

…osition while scrolling main content

- Modalbox now appears within viewport when scrolled below top of the page

- Instead of releasing MB_content height when scrollbars are not necessary, set content to actual height of content. Simply unsetting this value can cause problems

- Remove !important CSS parameters to work with first two fixes
  • Loading branch information...
1 parent f886ea2 commit af6c6f380127f39ff6d55889fdf35e1eea211b82 Joe Auty committed Sep 11, 2010
Showing with 26 additions and 13 deletions.
  1. +6 −6 modalbox.css
  2. +20 −7 modalbox.js
View
@@ -27,16 +27,16 @@
}
#MB_window {
- position:relative !important;
- margin-left:auto !important;
- margin-right:auto !important;
- top:0 !important;
- left:0 !important;
+ position:relative;
+ margin-left:auto;
+ margin-right:auto;
+ top:0;
+ left:0;
border: 0 solid;
text-align: left;
z-index: 10000;
}
-#MB_window[id] { position: relative!important; }
+#MB_window[id] { position: relative; }
#MB_frame {
position: relative;
View
@@ -60,7 +60,7 @@ Modalbox.Methods = {
)
)
)
- );
+ );
this.MBclose = new Element("a", {id: "MB_close", title: this.options.closeString, href: "#"}).update("<span>" + this.options.closeValue + "</span>");
this.MBheader.insert({'bottom':this.MBclose});
@@ -76,6 +76,16 @@ Modalbox.Methods = {
injectToEl.insert({'top':this.MBwindowwrapper});
injectToEl.insert({'top':this.MBoverlay});
+ var scrollOffsets = document.viewport.getScrollOffsets();
+ if (scrollOffsets[1] > document.viewport.getHeight()) {
+ $('MB_window').setStyle({top:scrollOffsets[1] + 'px'});
+ }
+
+ Event.observe(window, 'scroll', function() {
+ scrollOffsets = document.viewport.getScrollOffsets();
+ $('MB_window').setStyle({top:scrollOffsets[1] + 'px'});
+ });
+
// Initial scrolling position of the window. To be used for remove scrolling effect during ModalBox appearing
this.initScrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
this.initScrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
@@ -123,6 +133,7 @@ Modalbox.Methods = {
$(this.MBwindow).hide();
this._deinit();
}
+ Event.stopObserving(window, 'scroll');
} else throw("Modalbox is not initialized.");
},
@@ -169,10 +180,7 @@ Modalbox.Methods = {
Event.observe(window, "resize", this._setWidthAndPosition);
},
- resize: function(byWidth, byHeight, options) { // Change size of MB without loading content
- // release any MB_content height set prior to establish scrollbars in content area
- $(this.MBcontent).setStyle({height:''});
-
+ resize: function(byWidth, byHeight, options) { // Change size of MB without loading content
var oWidth = $(this.MBoverlay).getWidth();
var wHeight = $(this.MBwindow).getHeight();
var wWidth = $(this.MBwindow).getWidth();
@@ -191,6 +199,11 @@ Modalbox.Methods = {
newcHeight = newHeight - hHeight - parseInt($(this.MBframe).getStyle('padding-bottom'), 0) - parseInt($(this.MBcontent).getStyle('padding-bottom'), 0);
$(this.MBcontent).setStyle({height:newcHeight + 'px'});
}
+ else if ($(this.MBcontent).getStyle('height')) {
+ // release any MB_content height set prior to establish scrollbars in content area
+ $(this.MBcontent).setStyle({height:cHeight});
+ }
+
var newWidth = wWidth + byWidth;
this.options.width = newWidth;
if(options) this.setOptions(options); // Passing callbacks
@@ -225,7 +238,7 @@ Modalbox.Methods = {
if (typeof options == "undefined") {
options = new Object();
- }
+ }
// check to see if MB_content includes any images
var mbimages = $('MB_content').select('img');
@@ -274,7 +287,7 @@ Modalbox.Methods = {
var byWidth = 0;
}
if(byHeight != 0) {
- if(options) this.setOptions(options); // Passing callbacks
+ if(options) this.setOptions(options); // Passing callbacks
Modalbox.resize(byWidth, byHeight);
}
},

0 comments on commit af6c6f3

Please sign in to comment.