웹솔루션개발 26년 노하우! 해피CGI의 모든것

애니메이션 모달을 만들 수 있습니다.설치 방법에 대한 안내가 잘 되어있어, 순서대로 해보시면 됩니다. https://joaopereirawd.github.io/animatedModal.js/위 URL 로 방문하시면 위의 스크린샷과 동일한 순서에 대한 안내를 자세히 확인이 가능합니다.순서 대로 작업 후엔애니메이션 효과를 주며 열리는 모달을 확인하실 수 있습니다.

해당 사이트에서 버튼을 클릭하시면 유용한 효과들을 확인할 수 있습니다.일부 css 소스입니다.js 소스입니다.해당 사이트 또는 첨부파일을 다운로드 하면 전체 css 소스를 확인할 수 있습니다.

버튼 클릭시 확인용 모달 팝업창이 출력됩니다. 자바스크립트 소스입니다. 클릭시 모달 팝업 영역에 클래스를 삽입합니다. css로 모달 팝업창을 보이게 디자인 합니다. 첨부파일 다운로드 또는 해당 사이트에서 전체 소스를 확인할 수 있습니다.

위의 이미지를 보시면 기능 확인이 바로 되실 겁니다. 소스 적용도 간단합니다. var popbox = new Popbox({ blur:true, overlay:true, }); 위의 스크립트와 Popbox content 1 Close Popbox content 2 Close Main content of the page Open mypopbox 1 Open mypopbox 2 &nbsp 위의 기본 HTML 을 참고하시면 되겠습니다.

웹페이지에 표시되는 링크를 클릭하면 모달이 화면에 표시되고, 모달내에서 Youtube, Vimeo, Facebook 의 동영상을 재생할 수 있는 간단한 스크립트 입니다. 다운로드 받은 파일의 압축을 해제한뒤 test/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 데모 페이지상에서는 버튼이 3개가 있고, 각 버튼을 눌러보면 버튼을 눌러보면 모달화면이 열리면서 동영상이 재생이 됩니다. index.html 파일의 소스코드를 열어서 보면, 버튼3개에 대한 HTML태그가 확인이 가능합니다. 데모 페이지 자체에 버튼만 덜렁 있는 상태라 소스코드는 아래의 그림과 같이 단순하게 되어 있습니다. data-video-id='문자열' 을 이용해서 재생하고 싶은 동영상을 지정할 수 있습니다. 문자열은 유..