[jquery] 전체 레이어 팝업 띄우기 플러그인 1.3

전체화면을 가리고 그 위로 레이어팝업을 띄어야 할때 이용

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.play-ground.kr/js/fullPopup_1.3.js"></script>

<button>레이어팝업</button>

<iframe id="popup_base" src="/blank" style="display:none; position:fixed; width:70%; height:80%; background:#fff; border-radius:4px; "></iframe>

<script>
$(function(){
    $(document).on('click','button',function(){
        $('#popup_base').fullPopupOn({
            width:400,
            height:300
        });
    });
});
</script>

 

1. 제이쿼리 설치가 필요 합니다.

 

 

 

 

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

<button>레이어팝업</button>

<iframe id="popup_base" src="/blank" style="display:none; position:fixed; width:70%; height:80%; background:#fff; border-radius:4px; "></iframe>

<script>
$(function(){
    $(document).on('click','button',function(){
        $('#popup_base').fullPopupOn({
            width:400,
            height:300
        });
    });
});
</script>

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

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

<button>레이어팝업</button>

<iframe id="popup_base" src="/blank" style="display:none; position:fixed; width:70%; height:80%; background:#fff; border-radius:4px; "></iframe>

<script>
$(function(){
    $(document).on('click','button',function(){
        $('#popup_base').fullPopupOn({
            width:400,
            height:300
        });
    });
});
</script>

 

3. 팝업 내에 표현될 페이지를 iframe 태그 src에 추가하여, 위와 같이 html 태그를 추가합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.play-ground.kr/js/fullPopup_1.3.js"></script>

<button>레이어팝업</button>

<iframe id="popup_base" src="/blank" style="display:none; position:fixed; width:70%; height:80%; background:#fff; border-radius:4px; "></iframe>

<script>
$(function(){
    $(document).on('click','button',function(){
        $('#popup_base').fullPopupOn({
            width:400,
            height:300
        });
    });
});
</script>

 

4. 버튼을 클릭하였을 경우 동작함수를 다음과 같이 추가 합니다.

 

 

5. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다.

[과거버전 사용법 보러가기]

2015/10/31 - [Jquery] - jquery 플러그인으로 전체화면 레이아웃 띄우기