1.2(2012.04.03)로 업데이트 합니다.

History

  1. 2012.04.03 테두리 표시 방식 변경 및 불필요한 요소 제거
    기존에는 둥근 테두리를 지원하기 위해 이미지를 사용했으나 사용빈도가 없어서 이미지를 빼버리고 style 속성으로 지정할 수 있게 함.
    따라서 이미지가 들어가는 부분은 닫기 버튼 하나.
    불필요한 태그 제거.
    추가 옵션 : border(테두리 두께), borderColor(테두리 색), padding(안쪽여백), closeMargin(닫기버튼 여백-위쪽,오른쪽 기)
  2. 2012.01.02 위치고정 및 기타 버그 수정
  3. 2011.12.20 ie 버그 수정 - $.smartPop.close() 호출시 jQuery 오류 발생. 처음에만 install하고 그 뒤로는 show() or hide()로 처리




뭐로 이름지을까 고민하다고 요즘 대세인 스마트를 넣어서 smartPop(스마트팝)으로 지었다~ㅋ

이름값 하려고 신경 좀 썼는데 생각보단 복잡해서 일단 이쯤에서 끝내고 다음 버전에서 업데이트할 생각

지금 보니 아이패드에선 적용이 안된다~ㅠㅠ

모바일 적용과 스킨기능은 다음버전에서 지원할 예정.

smartPop


레이어로 팝업 띄우기 - html or url

레이어로 팝업 띄우는 소스는 웹에서 쉽게 구할 수 있지만 딱 내입맛에 맞는것이 없어서 만들까 말까 고민하다가 마침 쓸 일이 생겨서 만들었다.
일반적인 크기의 내용을 보여주는 팝업의 경우는 문제가 없지만 브라우저보다 큰 내용을 보여 줄 경우 스크롤바가 레이어에 생겨 버려서 모양도 별로 안 예쁘고 스크롤 하기도 불편하다.
불편한 이유는 본문 스크롤과 팝업 스크롤이 겹치기 때문이다.
그리고 또하나의 문제점은 브라우저 크기를 변경하면 팝업 위치가 고정이 되어 버려서 모양이 깨지게 된다.(기존에 단순하게 만든 팝업)

좀 불편한게 있긴해도 바뻐서 그냥 무시하고 있었는데 요즘 페이스북을 많이 하다 보니 페이스북에서 특이한 점을 발견했다.
페이스북 사진을 클릭하면 레이어 팝업이 뜨게 되는데 이때 스크롤바가 메인 페이지의 뉴스피드 스크롤바가 아니라 팝업의 스크롤바이다.
뉴스피드는 스크롤 할때 마다 새로운 내용을 가져오기 때문에 스크롤을 하면 할 수록 스크롤 길이가 커지게 된다.
그런데 어디서든 사진 보기를 클릭하면 사진 크기와 댓글 길이에 딱 맞게 필요한 만큼만 스크롤이 가능하고 레이어를 닫으면 다시 원래 뉴스피드의 스크롤이 나온다.
처음엔 브라우저 기본 스크롤 위로 레이어를 올렸는지 알고 무척 신기해했다. 불가능한것으로 알고 있었는데 어떻게 했는지?
소스를 분석해 보려고 봐도 일반 사이트와는 달라서 확인하기가 쉽지가 않다.
스크립트 파악은 힘들고 html 엘리먼트값의 변화를 보면서 css를 분석했다.
명령은 자바스크립트로 하지만 실제 작동은 css를 조작하는 것이기 때문에~
한참의 삽질끝에 페이스북과 같은 효과를 만들었다.
만든김에 좀더 편하게 쓰려고 jQuery 플러그인 형태로 작업했다.


목적

  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
    };





다운로드


smartPop-1.1 (2012.01.02) 

smartPop-1.1.zip


 

smartPop-1.2 (2012.04.03) 

smartPop-1.2.zip


















기본(메인) 페이지에 아이프레임을 사용하는 경우 사용방법.
저도 이렇게 많이 사용합니다. 메인 페이지가 프레임 구조라서 아이프레임에서 메인 페이지 스마트팝을 호출해야 중앙으로 이쁘게 뜨게 됩니다.

메인 페이지에 스마트팝 열기 닫기 함수를 추가합니다.
<script type="text/javascript">
// 팝업 열기 - muse.js 호환성
function smartPop( w, h, url )
{
    $.smartPop( {
          width         : w
        , height        : h
        , url           : url
        , bodyClose     : false
        , padding       : 0
        , border        : 3
        , borderColor   : '#323a47'
        , background    : '#000'
        , closeMargin   : 8
        , closeImg      : { width:17, height:17, src:'/design/set/images/btn_close.png' }
    } );
}
function smartPopClose()
{
    $.smartPopClose();
}
</script>

메인페이지에서 창 열기, 닫기
<a href="#" onclick="smartPop(500, 300, 'test.html'); return false;">창열기</a>
<a href="#" onclick="smartPopClose(); return false;">창닫기</a>

아이프레임 페이지에서 창열고 닫기
<a href="#" onclick="top.smartPop(500, 300, 'test.html'); return false;">창열기</a>
<a href="#" onclick="top.smartPopClose(); return false;">창닫기</a>



출처

http://inidu2.blog.me/110124193189

파로스 (inidu2)님의 블로그


'Remainder > Program' 카테고리의 다른 글

[펌]웹디자인 유용한 사이트  (0) 2013.08.05
[펌]자바스크립트 압축  (0) 2013.05.31
특수문자 쓰기 프로그램  (0) 2009.07.24
여름 모기 퇴치용 프로그램  (0) 2009.07.24
글자수 세는 프로그램  (0) 2009.07.24

+ Recent posts