jquery 플러그인으로 전체화면 레이아웃 띄우기

간혹 전체화면을 가리고 그 위로 레이어팝업을 띄워야 할때가 종종 있는데요.

그때 사용하면 좋은 플러그인을 만들어서 알려드리려고요.

fullPopup.js 라고 이름 붙인 플러그인은 여기 에서 다운로드 받아서 사용하실수 있으세요.

그러면 지금 부터 간단 사용법에 대해서 알려드릴게요.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="js/fullPopup.js"></script>

<button onclick="$('.fullpopup').fullPopupOn();">OPEN</button>

<div class="fullpopup" style="display:none; width:300px; height:200px; background:#fff;">

<button onclick="$('.fullpopup').fullPopupOff();">CLOSE</button>

</div>

워크식스에서 다운로드 받은 플러그인을 원하는 위치에 넣고 연결 해줍니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="js/fullPopup.js"></script>

<button onclick="$('.fullpopup').fullPopupOn();">OPEN</button>

<div class="fullpopup" style="display:none; width:300px; height:200px; background:#fff;">

<button onclick="$('.fullpopup').fullPopupOff();">CLOSE</button>

</div>

샘플 영상에서 처럼 가운데 하얀 레이어 팝업 영역에 해당 하는 div 를 생성해줍니다. 여기서 녹색으로 표시된 width와 height, display:none 는 필수 값입니다.

div의 클래스 명은 원하는것으로 설정해 주면 됩니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="js/fullPopup.js"></script>

<button onclick="$('.fullpopup').fullPopupOn();">OPEN</button>

<div class="fullpopup" style="display:none; width:300px; height:200px; background:#fff;">

<button onclick="$('.fullpopup').fullPopupOff();">CLOSE</button>

</div>

팝업을 열게할 버튼을 생성하고 그 안에 버튼을 클릭시 동작할 함수를 넣는데 위과 같이 써줍니다. (.fullPopupOn();)

fullpopup 이라는 클래스를 가지는 요소를 팝업으로 띄운다는 이야기 입니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="js/fullPopup.js"></script>

<button onclick="$('.fullpopup').fullPopupOn();">OPEN</button>

<div class="fullpopup" style="display:none; width:300px; height:200px; background:#fff;">

<button onclick="$('.fullpopup').fullPopupOff();">CLOSE</button>

</div>

팝업을 닫게할 버튼을 레이어 팝업 내에 만들고 클릭했을때 동작을 위와 같이 작성해줍니다. (.fullPopupOff();)

2016년 3월 4일 : 반응형 사이트에서 가로사이즈가 변하지 않는 문제를 수정 하였습니다.