Dialog Demos. <title>jQuery UI Dialog - Modal form</title> password = $( "#password" ), allFields = $( [] ).add( name ).add( email ).add( password ), tips = $( ".validateTips" ); function updateTips( t ) { .addClass( "ui-state-highlight" ); tips.removeClass( "ui-state-highlight", 1500 ); function checkLength( o, n, min, max ) { if ( o.val().length > max || o.val().length < min ) { o.addClass( "ui-state-error" ); updateTips( "Length of " + n + " must be between " + min + " and " + max + ".
" ); function checkRegexp( o, regexp, n ) { +++Fancy lightbox alternative. Collection of some code snippets 7.
Custom title formating - lightbox style JavaScript Example 6. If you have attached FancyBox than you can trigger click method jQuery(document).ready(function() { $("#your_selector").trigger('click'); }); Alternative method is to use manual call 5. Sample HTML form: <div style="display:none"><form id="login_form" method="post" action=""><p id="login_error">Please, enter data</p><p><label for="login_name">Login: </label><input type="text" id="login_name" name="login_name" size="30" /></p><p><label for="login_pass">Password: </label><input type="password" id="login_pass" name="login_pass" size="30" /></p><p><input type="submit" value="Login" /></p><p><em>Leave empty so see resizing</em></p></form></div> Attach FancyBox: Simple validation; submit data using Ajax and display response 4.
This script also enables full screen mode if video's href has the parameter &fs=1 3. 2. $("a:has(img)").fancybox(); $("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").fancybox(); 1. Labs - GreyBox. A pop-up window that doesn't suck.
Introduction GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox: It does not conflict with pop-up blockers It's only 22 KB! It's super easy to setup It's super easy to use You can easily alter the style as it is controlled through CSS Examples One website To trigger GreyBox you'll only need to append a rel tag on your a tags: Tricks: using Greybox + form plugin for a modal dialog box. I was looking for a replacement for the Yahoo UI library's dialog widget (here's the demo I was studying).
Specifically, I wanted something where I could write a simple CGI with form and error checking, and put that in a dialog box I could call from different pages in my application. Preferably something that could be added with unobtrusive javascript to an existing view. Back in the day of Internet Explorer 3 and Netscape 4, you would just use window.open() for this. But for some reason, the kids today are all excited about AJAX, DHTMLish gizmos; just looking at the plugins available for the cool JQuery library, you've got Thickbox and Tweenbox and Slightly Thickerbox and Greybox Redux. The cool form plugin provided a great deal of help, but I got into a bit of a muddle about how the CGI can let the javascript know it's done. Demo: Change password How it works Create a greybox (calling $.GB_show()). This is just a proof-of-concept, not an actual plugin or even a proper generic function. Login form using Jquery Light Box.