웹페이지 화면을 반투명하게 만들기

2012-04-13 by 편리

제목을 쓰고 보니 조금 거시기 한데.. 뭘 말하는 것이냐면 어떤 사이트에서 클릭하거나 하면 화면이 반투명의

화면으로 바뀌는 것을 볼 수 있는데 그걸 구현하는 방법이다. 다른 방법도 많이 있겠지만 난 그냥 jQuery를 이용해

반투명의 PNG 이미지를 화면 전체에 보이도록 하는 방법을 선택했다. 그게 처음에 떠오른 방법이었기 때문이다.

우선 아래는 CSS 코드이다.

#overlap { display: none; position: absolute; left: 0; top: 0; z-index: 1000; background: url(‘./img/overlap.png’) repeat left top; }

그리고 jQuery width()와 height()를 이용해 문서 사이즈를 구하고 show()를 해당 레이어가 보이도록 했다.

$(‘div#overlap’).width(w).height(h).show();
});
});
</script>

간단하게 만들긴 했는데.. 원하는대로 작동을 하니까 이쯤이면 된 것이 아닐까 싶다. ^^;