CODEWITHSUNDEEP
jquery
shr3jn
shr3jn

Reputation: 615

jQuery Modal Window Displayed Under Mask

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal Windows</title>
<style type='text/css'>
#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;
}
</style>
<script type='text/javascript' src='../javascript/jquery.js'></script> 

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

</head>

<body>
<a href="#" id="click">Click me</a>
<div id="modal">This is modal</div>
<div id="overlay">
</div>

</body>
</html>

Upvotes: 1

Views: 1728

Answers (1)

Mark Kramer
Mark Kramer

Reputation: 3214

This isn't a problem with your jQuery, this is a problem with your CSS. You set the Modal to position:auto which means that it is static positioned (static is the default) and is not affected by z-index. Just change the positioning to anything else and it will work. (relative, absolute, or fixed)

Example: http://jsbin.com/unifum

Positioning is the backbone of HTML and CSS, you should learn more about it (especially absolute positioning, that can be a very useful tool once you know how to use it correctly)

Upvotes: 2

Related Questions