#GWC UI Library : gwcCreateModalDialog 함수 [DEPRECATED]

웹 UI 라이브러리인 GWC에서 제공하는 gwcCreateModalDialog 함수에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1em;
}

.hcenter {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0.3em;
    gap: 0.6em;
 }

.vcenter {
    display: flex;
    align-items: center;
}

gwc-textinput {
    width: 20em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    btn.addEventListener("click", () => {
        const dlg = gwcCreateModalDialog("모달 대화상자");
        dlg.content = `
            

                

                    
                    
                
                
            
        `;
    
        dlg.content.querySelector("gwc-button").addEventListener("click", () => {
            dlg.remove();
        });

        dlg.show();
    
    });

    //GeoServiceWebComponentManager.instance.update();
};

실행 결과는 다음과 같습니다.