jQuery Modal Window Displayed Under Mask 
<p>I'm newbie in jQuery and i have a problem creating modal windows. My modal window is displayed under the mask. I want it to be displayed on top of the mask. I'm not being able to figure out the problem so need some assistance on this one. Here's the code:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Modal Windows&lt;/title&gt;
&lt;style type='text/css'&gt;
#overlay {
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
}
#modal {
    position: auto;
    display: none;
    margin-left: auto;
    margin-right: auto;
    color: #F00;
    z-index: 100;
}
&lt;/style&gt;
&lt;script type='text/javascript' src='../javascript/jquery.js'&gt;&lt;/script&gt; 

&lt;script type="text/javascript"&gt;
$(document).ready(function () {
        $("#click").click(function() {
            $('#overlay').css({ 'display' : 'block', opacity : 0});
            $('#overlay').fadeTo(500,0.8);
            $('#modal').show();
        });
});
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;a href="#" id="click"&gt;Click me&lt;/a&gt;
&lt;div id="modal"&gt;This is modal&lt;/div&gt;
&lt;div id="overlay"&gt;
&lt;/div&gt;

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