『zim.js』팝업창 형식의 웹앱 제작

'; win.document.body.innerHTML ='

' lib1.src = 'https://zimjs.org/cdn/1.3.2/createjs.js'; lib2.src = 'https://zimjs.org/cdn/cat/04/zim.js'; zimContent.src = 'https://tistory1.daumcdn.net/tistory/2784544/skin/images/test01.js'; win.document.head.appendChild(lib1); win.document.head.appendChild(lib2); win.document.body.appendChild(zimContent) }) stage.update(); })

◆ Title

- zim + window.open()을 활용한 팝업창 띄우기

◆ 기능

1] 버튼 클릭시 팝업 띄우기

2] 팝업 내부에서 zim기능 사용하기

◆ 코드

<script src="https://zimjs.org/cdn/1.3.2/createjs.js"></script>
<script src="https://zimjs.org/cdn/cat/04/zim.js"></script>
<div id="zimBase">&nbsp;</div>
<script>
  let frame = new Frame({
      scaling:'zimBase',
      width:500,
      height:400,
      color:light
  });
  
  let popFrame = new Frame({
              scaling:'',
              width:400,
              height:300,
              color:light
          });
  
  
  
  frame.on('ready', ()=>{
        let stage = frame.stage;
        let stageW = stage.width;
        let stageH = stage.height;
    
        let btn = new Button({
            width:150,
            text:'팝업 생성'
        }).center(stage);
    
       btn.on('click', ()=>{
           console.log('팝업 생성');
           let lib1 = document.createElement('script');
           let lib2 = document.createElement('script');
           let zimContent = document.createElement('script');
           
           //팝업내부 UI생성
           let win = window.open("","Model Window","width=700, height=500");
               win.document.head.innerHTML = '<head><title>3D Model Window~</title></head>';
               win.document.body.innerHTML ='<div id="modelWin"></div>'
              
               lib1.src = 'https://zimjs.org/cdn/1.3.2/createjs.js';
               lib2.src = 'https://zimjs.org/cdn/cat/04/zim.js';
               zimContent.src = 'https://tistory1.daumcdn.net/tistory/2784544/skin/images/test01.js';
         
               win.document.head.appendChild(lib1);
               win.document.head.appendChild(lib2);
               win.document.body.appendChild(zimContent)
                       
       })
       
       stage.update();
  })
 
</script>

저작자표시

'웹개발 자료실 > 프론트GUI 개발Code' 카테고리의 다른 글

「zim.js」 마우스 이벤트 + Sprite (0)	2021.07.20
「zim.js」모션패스 애니메이션 (0)	2021.07.19
『zim』웹앱 메뉴바 제작하기 (0)	2021.04.13
『zim』멀티 GUI 제작하기 (0)	2021.04.06
zim.js 레퍼런스 (0)	2021.02.20