PDF 파일도 모달로 띄우는 방법이 궁금합니다.
1248
작성한 질문수 3
안녕하세요 선생님. 강의 보면서 열심히 포트폴리오를 준비하고 있습니다.
질문은 모달로 PDF 파일을 띄우는 방법이 궁금합니다. PDF파일인지 파워포인트인지 정확하게 모르겠네요..!
https://www.youtube.com/watch?v=-kz4EvLbbjE&t=1695s 이 유튜브 강좌에서 14분55초에 보면 PDF파일 같은걸
모달로 띄우는데.. 이것도 featherlight 플러그인을 사용한건가요?? 아니라면 다른 방법은 뭔지 궁금합니다..!
답변 1
1
3가지 형태로 보여주실 수 있어요.
pdf 뿐만 아니라 html 파일, 이미지 파일도 동일한 방법으로 보여줄 수 있습니다.
첫번째는 직접 코딩해서 iframe으로 불러오는 방법입니다.
<div class="modal">
<div class="modal-content">
<iframe src="portfolio/website-01/plan.pdf" frameborder="0"></iframe>
</div>
</div>
두번째 방법은 featherlight로 띄우는 방법입니다.
featherlight로 띄우면 자동적으로 iframe 형태로 들어갑니다.
<a href="portfolio/website-01/plan.pdf" data-featherlight="iframe">Open Portfolio</a>
https://github.com/noelboss/featherlight/
세번째 방법은 UIKit을 사용하는 방법입니다.
<a class="uk-button uk-button-default" href="#modal-full" uk-toggle>Open</a>
<div id="modal-full" class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
<iframe src="portfolio/website-01/plan.pdf" frameborder="0"></iframe>
</div>
</div>
https://getuikit.com/docs/modal
현재도 float 사용은 중요한가요?
1
266
2
웹 호스팅 후 문제
1
288
1
퍼블리셔 코딩테스트 질문입니다.
1
633
1
feather light
1
306
2
skill 섹션 질문
1
288
1
포트폴리오 홈페이지 제작가이드
2
288
1
iframe 질문입니다.
1
250
1
디자인설정
1
367
1
연봉 질문합니다.
1
951
1
폰트, 이미지? 관련 질문입니다
1
351
1
파일질라 카페24? 관련 질문입니다
1
478
1
면접 복장 질문입니다
1
790
1
도메인 연결 오류
1
395
1
개인 포트폴리오 웹사이트 안에 들어갈 포트폴리오 웹사이트 작업물들
1
526
1
카페24 절약형 관련 질문있습니다
1
932
2
기능정의서 html에 첨부하는 방법/header include
1
683
1
prototype 뜻
1
768
1
폴더구조 질문드립니다.<재업로드>
1
469
1
폴더구조 질문드립니다
1
393
1
개인포토폴리오 해상도문제요..!
1
421
1
구글에 검색했을 때 나오는 포트폴리오
2
456
1
wow.js live option
1
460
1
개인 포트폴리오 홈페이지 만들때 UI 포토샵 디자인
1
564
1
featherlight 연결시 링크된 html이 문제가 있어요 ㅠㅠ
1
346
1