아이디/비번 기억
  • 봉하마을 방문후기
  • 미디어협동조합 국민TV국민TV의 조합원이 되어주세요!
  • 한국탐사저널리즘센터
현재위치 : HOME > 구구자료실

페이스북식 모바일팝업

관리자 | 2012.06.08 21:29 | 조회 8775

목적

  1. 내용에 상관없이 깔끔한 스크롤바 처리하기
  2. 브라우저 크기에 상관없이 중앙에 띄우기
  3. html 컨텐츠, url 페이지 모두 가능하게 하기


특징

  1. 브라우저 호환
  2. 깔끔한 스크롤바 처리
  3. 브라우저 크기 변경시 레이어 팝업 자동 중앙 정렬
  4. html, url 모두 사용 가능
  5. url 페이지를 띄울 경우 프레임 크기 자동 조절


설치

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery.smartPop.js"></script>
<link rel="stylesheet" href="jquery.smartPop.css" />

<script type="text/javascript">
    $(document).ready(function() {
        $('#sample1').click(function() {
            $.smartPop.open({ width: 500, height: 500, html: '<h1>smartPop</h1>' });
        });
        $('#sample2').click(function() {
            $.smartPop.open({ width: 900, height: 500, url: 'smartPop.html' });
        });
        $('#sample3').click(function() {
            $.smartPop.open({title: '스마트팝', width: 900, height: 500, revise: 150, url: 'smartPop.html' });
        });
        $('#sample4').click(function() {
            $.smartPop.open({title: '스마트팝', width: 900, height: 500, log: true, url: 'smartPop.html' });
        });
    });
</script>


사용법

  1. html 내용 보여주기
    1
    2
    3
    4
    5
    6
    $.smartPop.open({title: '스마트팝', background: "red", width: 500, height: 500, html: '보여줄 내용' });
    <input type="button" id="ex1" class="button" value="sample1">
     
    // 위치고정
    $.smartPop.open({title: '스마트팝', width: 500, height: 500, html: '보여줄 내용', position:'fixed', left: '10px', top: '10px' });
    <input type="button" id="ex1" class="button" value="위치고정">


  2. url 페이지 띄우기
    1
    2
    $.smartPop.open({title: '스마트팝', width: 500, height: 500, url: '보여줄 페이지' });
    <input type="button" id="ex2" class="button" value="sample2">

    세로 크기는 불러오는 페이지 크기에 맞게 자동으로 조절됨

  3. 추가 여백을 줘서 띄우기 - 페이지 특성에 따라 자동조절이 안맞을 경우 사용
    1
    2
    $.smartPop.open({title: '스마트팝', width: 500, height: 500, revise: 150, url: '보여줄 페이지' });
    <input type="button" id="ex3" class="button" value="sample3">

    revise - 추가 보정 높이값

  4. 높이값 확인 로그
    1
    2

    $.smartPop.open({title: '스마트팝', width: 500, height: 500, log: true, url: '보여줄 페이지' });
    <input type="button" id="ex4" class="button" value="sample4">


  5. 창 바깥쪽 클릭하면 창닫기
    1
    2
    $.smartPop.open({title: '스마트팝', bodyClose: true, width: 500, height: 500, html: '보여줄 내용' });
    <input type="button" id="ex5" class="button" value="sample5">

  6. 기본 옵션
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $.smartPop.defaults = {
        position    : 'center',
        left        : '310px',
        top         : '10px',
        bodyClose   : false,
        title       : 'smartPop',
        background  : '#fff',
        opacity     : .7,
        width       : '720px',
        height      : '500px',
        html        : '',
        url         : '',
        revise      : 0,
        log         : false
    };



twitter facebook me2day 요즘
98개(5/5페이지)
소스자료실
번호 제목 글쓴이 조회 날짜
18 [Java] 경고창/경고메세지 띄우기 관리자 9673 2012.06.12 18:45
17 [Java] 레이어 숨기고보이고 관리자 4845 2012.06.12 18:40
16 [etc] 메타태그 모음! 관리자 5509 2012.06.12 18:30
15 [etc] 웹폰트 적용하기 첨부파일 관리자 4489 2012.06.12 18:27
14 [etc] 프린트소스 (IE8,크롬,사파리,파폭 테스트완료) 관리자 7836 2012.06.12 17:49
13 [html/css] CSS초보를 위한 또는! 오랜만에 코딩하는 분을위한! 간단한 CSS모음 관리자 6099 2012.06.12 17:34
12 [html/css] 아이프레임 (iframe) 옵션을 알아보아용~ 관리자 7829 2012.06.12 17:32
11 [html/css] 마우스 오버 소스 (드림위버에서 만들기귀찮아서 ㅋ 복사해둠) 관리자 7914 2012.06.12 17:31
10 [html/css] 우클릭,드래그,선택방지 모음 관리자 9151 2012.06.12 17:30
9 [Java] 주소복사스크랩 관리자 3609 2012.06.12 17:28
8 [html/css] 기초적인 언어별 인클루드 방식 관리자 4875 2012.06.12 17:16
7 [모바일] 스마트폰으로 홈페이지 접속시 자동 모바일홈피로 이동 소스 관리자 9335 2012.06.12 17:15
6 [etc] 실시간검색위젯 첨부파일 관리자 5513 2012.06.12 17:13
5 [Java] 퀵메뉴스크롤기능켜기끄기 관리자 4678 2012.06.12 17:11
>> [모바일] 페이스북식 모바일팝업 관리자 8776 2012.06.08 21:29
3 [모바일] 가로세로모드 다른CSS적용하기 사진 관리자 9415 2012.06.08 21:28
2 [모바일] 모바일 홈페이지 SMS문자,전화,메일 연결하기! 관리자 8387 2012.06.08 21:27
1 [etc] 환율 노출 소스! 외환은행 제공 사진 첨부파일 관리자 6685 2012.06.08 21:23