2020. 2. 29. 15:30
   ,

DG_Popup 1.0

- DIV 팝업(혹은 다얄로그)를 생성하고 관리

- 팝업에서 팝업을 열어 관리함

- 사용자가 만든 Html을 사용함

- 창 이동 가능


라이브러리 테스트 : https://dang-gun.github.io/DG_JavaScript_Utility/DG_Popup/DG_Popup.html

프로그램 소스 : github - dang-gun/DG_JavaScript_Utility/DG_Popup/




Author  : Dang-Gun Roleeyas ( http://blog.danggun.net/ )

Create date : 2019.02.27

License  : MIT( https://opensource.org/licenses/MIT )


사용기술 : javascript, jQuery



유틸리티 설명

Div로 팝업(or 다얄로그)를 생성해 주고 팝업에서 또 팝업을 열어 관리하는 유틸리티입니다.

일반적인 팝업 라이브러리는 여러 창을 열고 관리하는 기능이 없어서 만들었습니다.



z인덱스(z-index)는 배열기준으로 계산되므로 중간 팝업을 먼저 닫으면 z인덱스가 꼬일 수 있습니다.


1. 주요 기능
- Div 팝업 생성

- 생성된 팝업 리스트 관리

- 사용자 지정 Html만 지원

- 팝업을 드래그 하여 이동

- 마지막으로 연 팝업 닫기

- 모든 팝업 닫기


2. 사용 방법

'DG_Popup'을 초기화해줍니다.

1
2
/** DG_Popup 초기화 */
DG_Popup.Initialize();
cs



'DG_Popup.Show'를 호출하여 팝업을 열 수 있습니다.

아래 코드에서는 'Show'함수를 만들고 그 안에서 'DG_Popup.Show'를 호출하고 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/** 팝업 열기 예제 */
function Show()
{
    var TestContentsHtml = ' \
        <div class="divTitle DG_PopupTitle">생성 순서</div> \
        <div class="divContents"> \
            내용물<br />\
            내용물2\
            <br />\
                <button onclick="Show()">Add New Popup!!</button>\
            <br />\
            <br />\
            <br />\
            <br />\
            <button onclick="DG_Popup.CloseAll()">All Close</button>\
            <br />\
            <button onclick="DG_Popup.Close()">Close</button>\
        </div>';
 
    popTemp = DG_Popup.Show({
        Content: TestContentsHtml,
        ContentCss: "DG_PopupContentCssAdd",
 
        top: 200,
        left: 200,
 
        OverlayClick: function (nPopupIndex, divPopupParent)
        {
            console.log(nPopupIndex + ", " + divPopupParent);
            DG_Popup.CloseTarget(divPopupParent);
        }
    });
}
cs



기본 html이 들어있지 않기 때문에 직접 만들어서 넣어야 합니다.


위에서 만든 'Show()'를 호출해 줍니다.



2-1. 'DG_Popup.Show'에전달할 옵션값

'DG_Popup.Show'를 호출할때 사용하는 옵션 설명입니다.


이름 타입
기본값
설명
ContentCss string
빈값
시작 위치 Y, 단위 px
top int
0
시작 위치 Y, 단위 px
left int
0
시작 위치 X, 단위 px
width string, int
auto
가로 크기
height string, int
auto
세로 크기
ParentCss string
빈값
생성된 팝업 전체를 감싸고 있는 div에 추가되는 css
SizeFixed bool
false
팝업이 완성되면 크기를 고정할지 여부
이 옵션이 없으면 창이동시 크기가 변경될수 있다.
Content string, object
빈값

컨탠츠에 출력할 html이나  오브젝트를 전달합니다.
제목 줄로 사용할 class에 'DG_PopupTitle'를 넣어주면 드래그를 통한 이동이 적용됩니다.


생성된 컨탠츠에 기본으로 들어가는 css는 아래와 같습니다.

DG_PopupParentCss : 생성된 팝업 전체를 감싸고 있는 div에 적용됨

DG_PopupOverlayCss : 오버레이(팝업 뒤 화면을 막아주는 영역)에 적용됨

DG_PopupContentCss : 지정한 Html이 적용되는 영역

ContentBackground string
"#fff"
컨탠츠 영역에 적용될 배경색
OverlayClick function
null
오버레이 클릭 시 사용할 이벤트
null이면 오버레이를 클릭해도 동작하지 않는다.
창을 닫으려면 'DG_Popup.CloseTarget(divPopupParent);'를 넣는다.

function (nPopupIndex, divPopupParent)
nPopupIndex : 생성에 사용된 인덱스
divPopupParent : 생성된 창의 개체 

OverlayBackground string
"#aaa"
오버레이에 적용할 배경색
OverlayOpacity float
0.3
오버레이에 적용할 반투명 값
OverlayCss string
빈값
오버레이에 추가할 css



2-2. 메소드 설명

이름 매개변수 리턴 설명
DG_Popup.Initialize(jsonOption) jsonOption : {json} 전달할 옵션, 전달하지 않아도 됨. 없음 DG_Popup을 초기화합니다.
'2-1.'참고
DG_Popup.Show(jsonOption) jsonOption : {json} 전달할 옵션 만들어진 팝업 오브젝트 DG_JQuery_Popup를 만들어서 표시한다.
'2-1.'참고
DG_Popup.CutBack(sData) sData : {int} 변환할 데이터 {int} 변환된 값 Css의 데이터값에 단위를 제거해준다.
DG_Popup.Close() 없음 없음 맨 마지막 창을 닫는다.
DG_Popup.CloseIndex(nIndex) nIndex : {int} 닫을 인덱스 없음 지정한 인덱스의 팝업을 닫는다.
DG_Popup.CloseAll 없음 없음 모든 팝업을 닫는다.
DG_Popup.CloseTarget(objTarget) objTarget : {object} 닫을 대상 없음 지정한 대상을 닫는다.



수정 이력

2020.02.29

- 기본 옵션을 초기화할 때 직접 지정할 수 있게 해주도록 매개변수 추가

- 생성완료 후 크기를 고정하는 옵션 추가


2020.02.27

- 구현 완료


댓글 작성

이름
패스워드
홈페이지
비밀글