DG Popup 1.0 - DIV 팝업을 여러 개 열어 관리하는 유틸리티
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. 주요 기능
- 생성된 팝업 리스트 관리
- 사용자 지정 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이나 오브젝트를 전달합니다. 생성된 컨탠츠에 기본으로 들어가는 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
- 구현 완료