majx modules > popin

We're trying to provide a customizable and accessible modal box interface, here are the features :

• accessibility :
  • it is full keyboard accessible ;
  • it will disable itself on small screens and mobile devices ;
  • if javascript isn't active, it will open the content in the existing window ;
  • the user is also allowed to open the popin as a normal page in a new window or tab ;
  • you can define the element to focus on after closing a popin ;
  • screen-reader compatibility is in working progress.
• behaviors :
  • everything works with DOM and Ajax, there are no frames or browser cache ;
  • it can be open and reloaded from a link, a form, a javascript or a flash application ;
  • it can be closed internally, by the Esc key or by a javascript or flash application ;
  • it lets you handle 404 errors ;
  • the closing button can be HTML or text ;
  • events : onbeforeload, onload, onunload, onreload ;
  • full configurable : ids and classes can be renamed ;
• style :
  • default size is optimized to fit 1024x768 resolutions
  • the size can be defined
  • it will never be bigger than the available window size ;
  • fade in, fade out can be enabled or disabled ;
  • resize on content refresh ;
  • settable styles and opacity.
• experimental (disabled by default) :
  • hash handling on page load ;
  • hash handling by opening a popin ;
  • popin resize on browser window resize.

Get majx core (majx.js + jQuery 1.3.2) and the code of the popin.

To maintain full functionality and all aspects of accessibility :

• Every popin is a document, like it would be for a standard popup window ;

Just write a link to your page with the defined class to call it into a popin, by default it would be : <a href="some_page.html" class="popin">Open a popin</a>

To open and close it from a javascript application just call (assuming your popin Object is popin1) :
    popin1.openPopin(url, focusElm);
or
    popin1.closePopin(url, focusElm);

focusElm is an optional DOM or jQuery object that defines the element to focus on when the popin closes.

Actually loading Flash and other scripts in a popin is tricky...

There is a lot of stuff we want to enhance... Check it out on Google Code

These tests were done on native browsers and clean installations.

	IE6	IE7+	Firefox 3+	Opera 9.6+	Safari 3+	Chrome 1+
Compatibility	yes	yes	yes	yes	yes	yes

There is actually no precise data for screen-readers... We're just aware that it could work better on them ;)
Stay tuned.