Eric's Blogs

Found a bug in modal-overlay? Let me know by posting to this thread.

Bug: incorrect display when window is scrollable.

The display of the form overlay does not work correctly when the page is scrollable and our position on the page is not at the top. What would be nice to have is that all of the page be dimmed and that the position of the overlay adapts to my current position on the page itself. If you have any ideas on solving this problem your solutions are welcome.

Bug Correction: using fixed positioning.

The display bug is easily corrected by using fixed CSS positioning as opposed to the current absolute positioning. Nice and elegant. I will post this change to the subversion repository soon. For those who dont't want to wait just go to the modal-overlay.js file and do a search/replace for "absolute"/"fixed". There should be only two occurences.

Also, I'm making other small changes that will make use the new behavior model of lowpro. This allows me to cut some code but will make the use of lowpro manditory.

I'm not sure if this a Bug or a feature request.

I am unable to get embedded javascript to execute in the modal. For example, if I go to the HTML version of the view, I receive the alert I have embedded in the view. If I view that same html.erb template via Modal Overlay, I do not get the Alert.

The problem was in the javascript from using innerHTML.

I changed:
update: function(html) {
$('modal-overlay').innerHTML = html;
}
To:
update: function(html) {
new Insertion.Top($('modal-overlay'), html);
}

The modal window can now have javascript execute from it. I don't know if it is the best way, but it works.

Daniel

The above code adds elements but doesn't delete them. So if you show the overlay, hide it, then show it again, you'll have an additional element. I changed the hide function to:

hide: function() {
if ($('modal-overlay').visible()) {
Effect.Fade('modal-overlay-dimmer', { duration: 0.2, queue: 'overlay' });
Effect.Fade('modal-overlay', { duration: 0.2, queue: 'overlay',
afterFinish: function() {
var oldOverlay = document.getElementById('modal-overlay');
$('modal-overlay').removeChild(oldOverlay.childNodes[0]);
$('modal-overlay-dimmer').hide();
ModalOverlay.update('');
}
});
}
}

In ie6 the window is displayed below the content (not in overlay)

So, what I've done to fix it in ie6 is

...
show: function() {
if (! $('modal-overlay').visible()) {
Effect.Appear('modal-overlay-dimmer', { duration: 0.2, queue: 'overlay', to: ModalOverlay.DimmerOpacity });
Effect.Appear('modal-overlay', { duration: 0.2, queue: 'overlay',
afterFinish: function() {
try { Form.focusFirstElement($('modal-overlay').select('FORM').first()); } catch(e) { }
}
});

if (navigator.appName=="Microsoft Internet Explorer" && parseInt(navigator.appVersion)<7 ) {
$$("body")[0].setStyle({
widht:'100%',
height:'100%',
overflow:'hidden'
});
}
}
},

hide: function() {
if ($('modal-overlay').visible()) {
Effect.Fade('modal-overlay-dimmer', { duration: 0.2, queue: 'overlay' });
Effect.Fade('modal-overlay', { duration: 0.2, queue: 'overlay',
afterFinish: function() {
$('modal-overlay').hide();
$('modal-overlay-dimmer').hide();
ModalOverlay.update('');
}
});
if (navigator.appName=="Microsoft Internet Explorer" && parseInt(navigator.appVersion)<7 ) {
$$("body")[0].setStyle({
widht:'auto',
height:'auto',
overflow:'hidden'
});
}
}
}
...
Event.observe(window, 'load', function() {
Element.insert(document.body, '<div id="modal-overlay" style="position:fixed;top:10em;left:2em;right:2em;bottom:0;z-index:1000001;display:none;"></div><div id="modal-overlay-dimmer" style="position:fixed;top:0;left:0;bottom:0;right:0;background-color:black;border: 1px solid #555555;z-index:1000000;display:none;"></div>', {position: 'top'});
});

and in css

#modal-overlay {
_position:absolute ! important;
_margin: auto auto ! important;
_z-index: 9999999 ! important;
}