BlockUI shows div, but blocks form

Question

I'm trying to create a force sign up form using blockUI. My problem is that when I fade in the sign up div and initiate blockUI, my signup div shows up above the block, but the form within the div is unusable and grayed out. Here is my code:

HTML:

<div id="popup-main">
    <div id="popup-container">
        <div id="popup-logo">
        </div>

        <div id="popup-form">
            <form id="popup-signup-form" name="popup-signup">
                Name:&nbsp;&nbsp;<input id="popup_name" type="textbox"><br>
                Email:&nbsp;&nbsp;<input id="popup_email" type="textbox"><br>
                Phone Number:&nbsp;&nbsp;<input id="popup_phone" type="textbox"><br>
                <br>
                <input type="checkbox" name="newlistings" value="Yes">Would you like to be notified of new listings by email?
                <br>
                <input type="checkbox" name="ebook" value="Yes">Would you like to recieve a free ebook?
                <input type="button" name="popup-submit-button" value="Join">
            </form>
        </div>
    </div>
</div>

jQuery:

$(document).ready(function() {
    var visited = $.cookie("cookie1")
    if (visited == null) {
        $("#popup-main").hide().delay(3000).fadeIn("slow", function() {
            $.blockUI({ message: null } );
        });
    }

So my main div containing my form is called popup-main, which is not displayed until it fades in after 3 seconds on page load. Once its faded in, blockUI is turned on. The z-index for popup-main is 9999 which gets it above the block. I was going to just have popup-main show up as a message like this:

$.blockUI({ message: $('#popup-main') });

But when I do it this way, all of my elements are shifted to the center. Is there anyway to either stop the elements from shifting center when inside the message? Or some way to exempt the form within popup-main from being blocked? Any help is greatly appreciated!