레이어를 화면 중앙에 띄우기

작업을 하다보니, 레이어를 스크롤에 상관없이 자동으로 화면 중앙에 띄우는 소스를 많이 보았다. 그런데 좀더 편하게 사용하고 싶어서 찾다가 커스텀 메서드를 만들어 사용하는게 가장 편하다는 생각이 들어서 만들었다. 사실 만들어 사용한지는 좀 됬지만, 귀차니즘으로 이제야 정리해본다.

/**

 * showLayer: 레이어를 브라우저 중앙에 표시

 */

$jq.fn.showLayer = function(){

var win = $jq(window);

var winH = win.scrollTop() + ((win.height() - $jq(this).height()) / 2);

var winW = win.scrollLeft() + ((win.width() - $jq(this).width()) / 2);

$jq(this).css('top', winH);

$jq(this).css('left', winW);

$jq(this).show();

$jq(this).focus();

}

소스는 별로 어려운게 없다. 다들 한번씩은 사용해오던 소스일 것이다. 단지 좀더 편하게 사용하기 위해 jquery의 커스텀 메서드를 만들었을 뿐이다. 실행하는 방법도 간단하다.

$jq('.layer').showLayer();

layer클래스가 들어간 레이어를 화면 중앙에 띄운다. 공통으로 만들어 사용하면 편하다. layer클래스는 보통 모든 레이어에 들어가므로 본인은 주로 id값을 사용한다.