modalbox.js
modalbox.css
(let me know if the above links don't work. I am still trying to figure out the best way to allow file downloads from blogspot).
A quick post to describe my changes to modalbox.js:
- (re)Positionable
A user can position Modalbox by specifying the CSS position properties (top, left, right, bottom)
as
Modalbox.show(content, {title: 'my positioned modalbox', top: '200px', left: '100px'});
and then ...
Modalbox.show(content, {title:'my re-positioned modalbox', top: '100px', right: '100px'});
If the CSS position properties are not specified, modalbox pops up in the default position.
If the left and right properties are not specified, the modalbox pops up in the horizontal center.
- enable_rjs
Modalbox treats any content returned by a http request to be html + script. However this craps out with Rails rjs. enable_rjs enables the rjs support so you can do (a bit contrived, but you get the idea)
respond_to do |format|The invocation is
format.html {
...
}
format.js {
new_form = render_to_string(:partial => 'new', :layout => false)
render :update do |page|
page.call 'Modalbox._insertContent', new_form, { :top => '50px', :right => '100px'}.to_json
page.call 'Modalbox._putContent'
end
}
end
Modalbox.show(content, { enable_rjs: true});
- scroll bars disappear in IE 6
This is described in detail here
Please note that Modalbox behaves like a singleton class. So if you set an option for a content, you need to explicitly reset that option to disable it for subsequent content.
For e.g.
Modalbox.show('/some_rjs_action', {enable_rjs: true});
and then ...
Modalbox.show('/some_action_that_returns_html', {enable_rjs: false});
Let me know if you find any issues.
Njoy!
7 comments:
Code works great but when using it on our site a strange bug occurs. We have multiple forms that are filled out using modal box on the same page. If you close modal box after completeing a form using the x, you are unable to type on any of the subsequent forms. However if you complete a form and close it by clicking on the overlay area, there is no problem at all. This is only an ie bug and only with your version of modal box not with the origial. Any suggestions?
Hmm, I haven't touched that bit of the modalbox code so not sure where the problem could be.
Can you show me a snippet of what you are trying to do? Or perhaps a link where this issue occurs?
You bet. The site is basicinvite.com. Click on any of the wedding invitations and you'll see four buttons, "change colors", "change layout", "submit wording", "submit photos". All of these buttons pull up a form using modal box. The x has been color matched so that it doesn't show up, but if you mouse over that area its still there.
Looking at the code, clicking on close calls _hide whereas clicking on the overlay calls hide.
_hide looks like this:
_hide: function(event) { // Internal hide...
if(event) Event.stop(event);
this.hide();
},
Can you try this:
_hide: function(event) { // Internal hide...
event = event || window.event;
if(event) Event.stop(event);
this.hide();
},
That didn't fix it. Any other suggestions?
Looks like focus is being set to the close element in the function below:
_setFocus: function() { // Setting focus to be looped inside current MB
if(this.focusableElements.length > 0) {
var i = 0;
var firstEl = this.focusableElements.find(function (el){
i++;
return el.tabIndex == 1;
}) || this.focusableElements.first();
this.currFocused = (i == this.focusableElements.length - 1) ? (i-1) : 0;
firstEl.focus(); // Focus on first focusable element except close button
} else
$("MB_close").focus(); // If no focusable elements exist focus on close button
},
Can you try removing the else condition above so the foucs is not set on the x.
Still nothing. What a strange problem.
Post a Comment