The new version of Modalbox has been released recently. It’s numbered 1.5.4 and has a lot of new features and bug fixes inside the package. Most of these new features were requested by Modalbox users from around the world for a while, but due to being busy on our primary projects I wasn’t able to implement them. But it’s better late than never — please welcome the new Modalbox version!
The most requested feature was to show the vertical scroll bar automatically if the content doesn’t fit the dialog height. So I decided to implement this one in this release. Now all that’s needed to have scroll bars appear automatically is to define the height of the dialog. In that case Modalbox will switch into the “scrolling” mode with the fixed height defined trough the options. For example:
Modalbox.show(this.href, {title: this.title, height: 400});While implementing “scrolling” mode I decided to make some refactoring of the code to allow another great improvement — automatic height adjustment to the size of content. Now Modalbox doesn’t require the height property to be defined in most cases! A great addition, since different browsers on different platforms display content in a slightly different way and finding a right height was a real pain in the ass before. In the new version all you need is to specify the source of the content to load into the Modalbox window. The rest of the height adjustments will be made on the client side.
Modalbox.show(this.href, {title: this.title});Please also note that title
property is now made optional too. Please keep it in mind migrating to the new version, since it can break your JS code if you’ll use old calls of Modalbox.
Another neat addition in this release is the “offline” mode. This means, you don’t need to rely on Ajax to show content in the Modalbox! From 1.5.4 you can use plain HTML, javascript objects or already existing DOM nodes to show them inside the Modalbox window.
Let’s say you’re about to show some kind of short confirmation dialog. Something like “Are you sure to delete this item?” Obviously, it’s too much to use a separated HTML page and an additional Ajax request to do that.
Now you can do that with a breeze using Modalbox 1.5.4! For example:
Modalbox.show(
'<div class="warning"><p>Are you sure to delete this item?</p> <input type="button" value="Yes, delete!" onclick="Modalbox.hide()" /> or <input type="button" value="No, leave it!" onclick="Modalbox.hide()" /></div>',
{title: this.title, width: 300}
);or even easier using DOM element:
<div class="warning" id="domexample">
<p>Are you sure to delete this item?</p>
<input type="button" value="Yes, delete!" onclick="Modalbox.hide()" />
or
<input type="button" value="No, leave it!" onclick="Modalbox.hide()" />
</div>Modalbox.show($('domexample'), {title: this.title});This version also includes tons of bugs fixes which were reported by Modalbox users at the Google Code Modalbox page and the Modalbox Google Groups page. I appreciate the feedback I’m getting from the community. Thanks all!
You can find more info and see examples here: http://wildbit.com/labs/modalbox/.