Floating animated popup element

by doug65536

HTML

<div id="page">
    <p><a href="#" class="loginbutton">Login</a>

    </p>Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content. Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>Random content.<br>
    <div class="animformcontainer" id="loginform">
        <form><label for="login_username">Username:</label>
            <input id="login_username" name="username" />
            <br><label for="login_password">Password:</label>
            <input id="login_password" name="password" type="password" />
            <button>Login</button>
                <button class="loginbutton" type="button">Cancel</button>
        </form>
    </div>
        
    <div id="">
        <button><
    </div>
</div>

CSS

#page {
    position: relative;
}
.animformcontainer {
    position: fixed;
    top: -300px;
    left: 0px;
    right: 0px;
    z-index: 10;
    background-color: white;
    border: solid black 1px;
    border-radius: 8px;
    padding: 8px;
    margin: 0px;
}

#loginform label {
    width: 96px;
    display: inline-block;
    text-align: right;
}

JavaScript

$(function () {
    var floating_element = function (element_selector, toggle_button_selector, shown_pos) {
        var element_shown = false;
        var element = $(element_selector);
        var element_height = element.height();
        shown_pos = shown_pos === undefined ? '0px' : shown_pos;
        
        var find_toggle_buttons = function() {
            return toggle_button_selector ? $(toggle_button_selector) : [];
        };
        
        var toggle_buttons = find_toggle_buttons();
        
        var set_shown = function(shown) {
            var newpos = shown ? shown_pos : ((-element_height * 2) + 'px');
            element_shown = shown;
            element.animate({
                top: newpos
            }, {
                queue: false
            });
        };
        
        var toggle_shown = function() {
            set_shown(!element_shown);
        };
        
        var toggle_button_handler = function () {
            toggle_shown(!element_shown);
        };
        
        toggle_buttons.bind('click.floating_login', toggle_button_handler);
        
        // Return a function to use to manipulate this object later
        return function(action) {
            switch (action) {
                case 'show':
                    set_shown(true);
                    break;
                case 'hide':
                    set_shown(false);
                    break;
                case 'unbind':
                    toggle_buttons.unbind('click.floating_element', toggle_button_handler);
                    toggle_buttons = [];
                    break;
                case 'rebind':
                    // Takes optional parameter: new toggle button selector
                    var new_selector = arguments[1];
                    if (new_selector !== undefined) {
                        toggle_button_selector = new_selector;
                    }
                    toggle_buttons.unbind('click.floating_element',...