# Dialog (appendix)

> 지정한 위치에 레이어팝업 형식의 다이얼로그를 생성합니다.
> 시트 안에서 다이얼로그 생성시 sheet.showDialog() 함수를 사용하고, 시트 외부에서는 IBSheet.showDialog() 를 통하여 사용하실 수 있습니다.

## 사용 가능한 속성

Name | Type | Description
--- | --- | ---
Head | `string` | 다이얼로그 상단에 들어갈 타이틀
Foot | `string` | 다이얼로그 하단에 들어갈 타이틀
Header | `string` | 시트의 특정 셀 위에 다이얼로그를 생성할 때 해당 셀이 다이얼로그의 헤더가 됩니다. 이 속성은 해당 셀에 보여질 문자열(다이얼로그가 닫히면 자동으로 사라짐)을 설정합니다. 아래 속성 설명에서 헤더라 함은 모두 이 셀을 의미합니다.
HeadClose | `boolean` | Head가 설정되어 있을 때, 헤더 타이틀 우측편에 닫기 위한 X 버튼을 보여줄지 여부
CanFocus | `boolean` | 다이얼로그 생성시 포커스를 갖게 할 것인지 여부
Modal | `boolean` | 다이얼로그 생성시 화면에 다른 객체에 접근하지 못하게끔 합니다.
Body | `string` | 다이얼로그 안에 구성할 HTML 내용을 설정합니다.
Wrap | `boolean` | 다이얼로그 내부의 내용이 다이얼로그 너비보다 큰 경우 줄넘김 시킬지 여부를 설정합니다.
MaxHeight | `number` | 헤더를 제외한 다이얼로그의 최대 높이를 설정합니다. MaxHeight값보다 다이얼로그 내부의 내용이 크면 세로 스크롤바가 생성됩니다.
MinHeight | `number` | 헤더를 제외한 다이얼로그의 최소 높이를 설정합니다.
MaxWidth | `number` | 다이얼로그의 최대 너비 다이얼로그 안에 내용이 MaxWidth보다 크면 overflow-x:hidden으로 감춰집니다. 0으로 설정하면 다이얼로그 안에 셀의 너비에 맞게 자동으로 크기가 결정됩니다. Position속성에 Width가 설정되어 있는 경우 (Position)Width 값이 우선 적용 됩니다.
MinWidth | `number` | 다이얼로그의 최소 너비 0으로 설정하면 다이얼로그 안에 셀의 너비에 맞게 자동으로 크기가 결정됩니다. Position속성에 Width가 설정되어 있는 경우 (Position)Width 값이 우선 적용 됩니다.
Area | `object` | 다이얼로그를 브라우저 내에 특정 범위 안에서만 보여지게끔 합니다. (지정한 영역을 넘어서 창크기를 조절하거나 다이얼로그의 위치를 이동할 수 없음) 영역은 X, Y (영역의 시작점)과 Width, Height(영역의 크기)로 설정합니다. ex ) { X:100, Y:100, Width:400, Height:500 }
Position | `object` | 다이얼로그의 생성 위치를 설정합니다.(Position appendix을 참고)
HeadDrag | `boolean` | 다이얼로그의 헤드(헤더아님)를 드래그하여 다이얼로그의 위치를 변경할 지 여부를 설정합니다.
Shadow | `boolean` | 다이얼로그에 우측아래로 그림자를 표현할 지 여부
ShadowHeader | `boolean` | 다이얼로그 헤더의 우측아래로 그림자를 표현할 지 여부
CloseOut | `boolean` | 마우스커서가 다이얼로그 밖으로 나가거나 다이얼로그 헤더 위로 가면 다이얼로그를 닫습니다.
CloseTimeout | `number` | 다이얼로그에서 커서가 벗어났을 때 지정한 시간이 경과시 닫습니다(기본값 300, 밀리초 단위)
CloseClickHeader | `boolean` | 다이얼로그 헤더를 클릭하면 다이얼로그를 닫습니다.
CloseAfter | `number` | 다이얼로그가 오픈 된 이후 특정 시간 경과 후 자동으로 다이얼로그를 닫습니다.(밀리초 단위)
CloseClick | `boolean` | 다이얼로그를 클릭시 다이얼로그를 닫습니다.
ZIndex | `number` | 해당 다이얼로그가 갖게 될 z-index를 설정합니다.(default:258)

## 다이얼로그 객체

showDialog()의 리턴 값이나 sheet.Dialog 를 통해 현재 생성된 다이얼로그에 접근할 수 있습니다.
이와 같은 Dialog 객체는 다음과 같은 속성과 함수를 갖습니다.

### Property

Tag : 다이얼로그안의 HTML객체를 갖고 있습니다.

    //Tag 사용 예
    var dialogObj = IBSheet.showDialog(...);
    var x = dialogObj.Tag.querySelector("#dlgInput").value;

### method

Close() : 선택한 다이얼로그 창을 닫습니다.

    //Close() 사용 예
    dialogObj = sheet.Dialog; // 열려있는 Dialog 객체를 시트로 부터 얻음
    dialogObj.Close(); // Dialog 객체를 닫음.

[아래 Example 다이얼로그 사용 예]

### Example

    function openDlg() {
        var dialog = {
    			Header: "계산 중",          // 다이얼로그를 오픈한 셀에 표시될 글자
    			Head:"환율계산기",          // 다이얼로그 상단 타이틀
    			Foot: "ibleaders co.,ltd",  // 다이얼로그 하단 타이틀
    			MinWidth:0,                 // 다이얼로그 너비
    			Body: "<div>"                // 다이얼로그 안 내용
    				+ "<select id='inputUnit' onchange='calc()'>"
    				+ "<option value='USD'>USD</option><option value='JPY'>JPY</option>"
    				+ "<option value='EUR'>EUR</option><option value='CNY'>CNY</option>"
    				+ "<option value='KRW'>KRW</option>"
    				+ "</select>"
    				+ " <input type='text' id='inputMoney' class='number' onchange='calc()'/>"
    				+ "</div> "
    				+ "<div style='text-align: center;'><i class='fas fa-equals'></i></div>"
    				+ "<div>"
    				+ "<select id='outputUnit' onchange='calc()'>"
    				+ "<option value='USD'>USD</option><option value='JPY'>JPY</option>"
    				+ "<option value='EUR'>EUR</option><option value='CNY'>CNY</option>"
    				+ "<option value='KRW'>KRW</option></select>"
    				+ " <input type='text' id='outMoney'  class='number readonly' />"
    				+ "</div>"
    				+ "<div style='text-align:center;padding:10px 0 5px 0;'>"
    				+ "<button type='button' onclick='confirmCalc()'>확인</button>"
    				+ "</div>"
        };

        sheet.showDialog({row : sheet.getRowById("AR5"), col: "AMOUNT06", dialog: dialog});
    }

    // 확인 버튼 클릭시
    function confirmCalc() {
    	var dd = sheet.Dialog;
    	var v = dd.Tag.querySelector("#outMoney").value;

    	dd.Row[dd.Col] = v;
    	sheet.refreshCell(dd.Row,dd.Col);
    	dd.Close();
    }

    // 다이얼로그 내에 값 변경시
    function calc() {
    	var dd = sheet.Dialog;
    	var inpU = dd.Tag.querySelector("#inputUnit");
    	var outU = dd.Tag.querySelector("#outputUnit");
    	var inpV = dd.Tag.querySelector("#inputMoney");
    	var outV = dd.Tag.querySelector("#outMoney");

    	if (inpV.value == "") return;
    	var baseCurrency = inpV.value;
    	switch (inpU.value) {
    		case 'EUR':
    			baseCurrency = parseFloat(inpV.value) * 1.13546;
    		break;
    		case 'JPY':
    			baseCurrency = parseFloat(inpV.value) * 0.00903;
    		break;
    		case 'CNY':
    			baseCurrency = parseFloat(inpV.value) * 0.14929;
    		break;
    		case 'KRW':
    			baseCurrency = parseFloat(inpV.value) * 0.00089;
    		break;
    	}
    	switch(outU.value) {
    		case 'EUR':
    			outV.value = baseCurrency * 0.8807;
    		break;
    		case 'JPY':
    			outV.value = baseCurrency * 110.803;
    		break;
    		case 'CNY':
    			outV.value = baseCurrency * 6.6984;
    		break;
    		case 'KRW':
    			outV.value = baseCurrency * 1118.15;
    		break;
    		case 'USD':
    			outV.value = baseCurrency * 1;
    		break;
    	}
    }

### Read More

- showDialog method
- showDownloadDialog method
- showEditDialog method
- showFindDialog method
- showPivotDialog method
- showUploadDialog method
- showDialog static

### Since

product | version | desc
--- | --- | ---
core | 8.0.0.0 | 기능 추가