jQuery 모달 윈도우가 마스크 아래에 표시되었습니다.

저는 jQuery에서 초보자이고 모달 윈도우를 만드는 데 문제가 있습니다. 내 모달 창이 마스크 아래에 표시됩니다. 나는 그것이 마스크 위에 표시되기를 원한다. 나는 문제를 파악할 수 없으므로이 문제에 대한 도움이 필요하다. 코드는 다음과 같습니다.jQuery 모달 윈도우가 마스크 아래에 표시되었습니다.

<!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>

출처

2011-10-01 shr3jn

이것은 jQuery에서 문제가되지 않습니다. 이것은 CSS 문제입니다. 모달을 position:auto으로 설정하면 정적 위치 지정 (정적 임)이 z- 인덱스의 영향을받지 않음을 의미합니다. 위치를 다른 것으로 변경하면 작동 할 것입니다. (상대 절대 또는 고정)

예 : http://jsbin.com/unifum

위치는 당신이 방법을 알고 나면, 특히 절대 위치, 즉 매우 유용한 도구가 될 수 있습니다 그것은 (에 대한 자세한 내용은해야, HTML과 CSS의 중추입니다 올바르게 사용하십시오)

출처

2011-10-01 09:45:10

해 주셔서 감사합니다! :) – shr3jn

jQuery 모달 윈도우가 마스크 아래에 표시되었습니다.

답변

관련 문제