jquery modal funnieness in IE
<p>I nabbed this jqury modal login <a href="http://www.alessioatzeni.com/blog/login-box-modal-dialog-window-with-css-and-jquery/" rel="nofollow">http://www.alessioatzeni.com/blog/login-box-modal-dialog-window-with-css-and-jquery/</a>
and it works great in chrome and FF - and it works in IE on the demo page, but when I implement it - even in a super basic form, it doesn't work...</p>

<p>The modal mask works, but the login form render behind the mask and in the upper left corner, not centered...not to mention the form doesnt even render...</p>

<p>It get weird for me as I try to convey it - in jsfiddle</p>

<pre><code>http://jsfiddle.net/n2bFt/8/
</code></pre>

<p>even in IE it works (making me think jsfiddle uses a webkit rendering engine for that window)</p>

<p>HOWEVER if you run the page straight in IE9 - it fubars...</p>

<p>any ideas....please...</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#mask { display: none; position: absolute; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; background:#7d949a; opacity: 0.8; filter:alpha( opacity=80 ); }

.login-popup{ display:none; position: fixed; top: 50%; left: 50%; z-index: 9999; float: left; background: #333; padding: 10px; border: 2px solid #ddd; font-size: 1.2em; box-shadow: 0px 0px 20px #999; -moz-box-shadow: 0px 0px 20px #999; /* Firefox */ -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */   border-radius:3px 3px 3px 3px;  -moz-border-radius: 3px; /* Firefox */ -webkit-border-radius: 3px; /* Safari, Chrome */ }

img.btn_close { float: right; margin: -28px -28px 0 0; }
fieldset { border:none; }
form.signin .textbox label { display:block; padding-bottom:7px; }
form.signin .textbox span { display:block; }
form.signin p, form.signin span { color:#999; font-size:11px; line-height:18px; } 
form.signin .textbox input { width:200px; font:13px Arial, Helvetica, sans-serif; padding:6px 6px 4px; background:#666666;     border-bottom:1px solid #333; border-left:1px solid #000; border-right:1px solid #333; border-top:1px     solid #000; color:#fff; 
 border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
&lt;/style&gt;

&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" &gt;&lt;/script&gt;
&lt;script&gt;
$( document ).ready( function() {
$( 'a.login-window' ).click( function() {

    // Getting the variable's value from a link 
    var loginBox = $( this ).attr( 'href' );

    //Fade in the Popup and add close button
    $( loginBox ).fadeIn( 300 );

    //Set the center alignment padding + border
    var popMargTop = ( $( loginBox ).height() + 24 ) / 2; 
    var popMargLeft = ( $( loginBox ).width() + 24 ) / 2; 

    $( loginBox ).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $( 'body' ).append( '&lt;div id="mask"&gt;&lt;/div&gt;' );
    $( '#mask' ).fadeIn( 300 );

    return false;
});

// When clicking on the button close or the mask layer the popup closed
$( 'a.close, #mask' ).on( 'click', function() { 
    $( '#mask, .login-popup' ).fadeOut( 300 , function() {
        $( '#mask' ).remove();  
    }); 

    return false;
});
});
&lt;/script&gt;

&lt;/head&gt;
&lt;body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" &gt;

&lt;div id="login-box" class="login-popup"&gt;
&lt;a href="#" class="close"&gt;&lt;img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /&gt;&lt;/a&gt;
&lt;form method="post" class="signin" action="#"&gt;
    &lt;fieldset class="textbox"&gt;
    &lt;label class="username"&gt;&lt;span&gt;Email&lt;/span&gt;
        &lt;input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username"&gt;
    &lt;/label&gt;

    &lt;label class="password"&gt;&lt;span&gt;Password&lt;/span&gt;
        &lt;input id="password" name="password" value="" type="password" placeholder="Password"&gt;
    &lt;/label&gt;

    &lt;button class="submit button" type="button"&gt;Sign in&lt;/button&gt;

    &lt;p&gt;&lt;a class="forgot" href="#"&gt;Forgot your password?&lt;/a&gt;&lt;/p&gt;

    &lt;/fieldset&gt;
&lt;/form&gt;
&lt;/div&gt;

&lt;span style="font-size: 8pt; color: #707070;" &gt;&lt;a href="#login-box" class="login-window"&gt;Client Login&lt;/a&gt;&amp;copy; 2012-&lt;/span&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
