nemeseri / ender-overlay Goto Github PK

With a visible vertical scrollbar, when overlay (with a mask) is opened, the size of the mask will force browser to show horizontal scrollbar.

You can reproduce this on the demo page of your site - http://nemeseri.com/ender-overlay/demos/basics.html
Make sure you have only vertical scrollbar visible. Now, if you click on any of the images, horizontal scrollbar will appear along with the overlay.

This comes from getDocSize function's Ender specific implementation. It uses bonzo's $.doc() method which returns viewport size (includes scrollbars' width/height), instead of the document body size.

I suggest to ditch the Ender specific if clause - if (window.ender) { - and use the default/fallback functionality that returns document width and height.

For example, if I create an overlay with following code

var box = $('#overlay').overlay({
  allowMultipleDisplay: false, // Also the default value.
  onBeforeClose: function() {
    console.log("Close triggered");
  }
});

// Opening the 'box' will output "Close triggered" to console.
box.open();
> "Close triggered"

I did a little digging and found that this if clause

if (opt.onBeforeClose(api) === false ||
  this.$overlay.css('display') !== 'block') {
  return;
}

executes onBeforeClose function regardless of overlay's current visibility state.

I think the conditions in the if clause should be the other way around (like they are for onBeforeOpen function). What do you think?

Hello,
Just noticed a bug on IE10 : the overlay is looping in the "open" function, you won't be able to close the pop-in anymore then. This happens also on the demo page :
http://nemeseri.com/ender-overlay/demos/content-types.html