Transfer Dialog

by Edward

HTML

<a id="fill-login-form" href="#">Login</a>

<div id="login-form" style="display: none; width: 340px; height: 135px;">
    Some stuff
</div>

CSS

/*
 * jQuery UI CSS Framework 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 *  To view and modify this theme, visit ...

JavaScript

$(document).ready(function() {
    $('#fill-login-form').button();
    // turn the div into a jQuery UI dialog and hide it
    var dlg = $('#login-form').dialog({
        title: 'Just a cool dialog',
        autoOpen: false,
        // hook to the 'beforeclose' event instead of 'close'
        beforeClose: function(event, ui) {
            $(this).dialog('widget').effect('transfer', {
                to: '#fill-login-form',
                className: 'ui-effects-transfer'
            }, 500, null);
            return true; // to close it
        },
        open: function(event, ui) {
            $('#fill-login-form').effect('transfer', {
                to: $(this).dialog('widget'),
                className: 'ui-effects-transfer'
            }, 500, null);
        }
    });
     
    // open the dialog when the link is clicked
    $('#fill-login-form').click(function(e) {
        e.preventDefault();
        dlg.dialog('open');
    });
     
});