간단한 PDF 모달 만들기

Question

간단한 모달 형식을 쓸 수 있습니다. 'The sky is blue' 여기를 클릭하면 (pdf 링크) pdf 모달을 한 번 클릭하면 열립니다. 사진을 더한 것 외에 그림을 찾았습니다. 사진 모달 이 나타납니다.
버튼으로 사진을 교체하고 버튼을 클릭하면 PDF 모달이 열립니다.

어떻게 변경해야합니까?

이 웹에 처음 오신 분들께. 나는 담배를 피우지 만 실험을 해보고 담배를 피웠다.

을 heres HTML :

 <!-- Trigger the Modal --> 
     <img id="myImg" src="pic4377.jpg" alt="RESOLUTION" width="300"  height="200"> 
     <!-- The Modal --> 
     <div id="myModal" class="modal"> 
    **strong text**<!-- The Close Button --> 
     <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 
     <!-- Modal Content (The Image) --> 
     <img class="modal-content" id="img01"> 
     <!-- Modal Caption (Image Text) --> 
     <div id="caption"></div> 
     </div> 

을 heres CSS :

 /* Style the Image Used to Trigger the Modal */ 
     #myImg { 
     border-radius: 5px; 
     cursor: pointer; 
     transition: 0.3s; 
     } 

     #myImg:hover {opacity: 0.7;} 

      /* The Modal (background) */ 
     .modal { 
      display: none; /* Hidden by default */ 
      position: fixed; /* Stay in place */ 
      z-index: 1; /* Sit on top */ 
      padding-top: 100px; /* Location of the box */ 
      left: 0; 
      top: 0; 
      width: 100%; /* Full width */ 
      height: 100%; /* Full height */ 
      overflow: auto; /* Enable scroll if needed */ 
      background-color: rgb(0,0,0); /* Fallback color */ 
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
      } 

      /* Modal Content (Image) */ 
      .modal-content { 
      margin: auto; 
      display: block; 
      width: 80%; 
      max-width: 700px; 
      } 

     /* Caption of Modal Image (Image Text) - Same Width as the Image */ 
      #caption { 
      margin: auto; 
       display: block; 
       width: 80%; 
      max-width: 700px; 
      text-align: center; 
       color: #ccc; 
    padding: 10px 0; 
    height: 150px; 
} 

/* Add Animation - Zoom in the Modal */ 
.modal-content, #caption { 
    -webkit-animation-name: zoom; 
    -webkit-animation-duration: 0.6s; 
    animation-name: zoom; 
    animation-duration: 0.6s; 
} 

@-webkit-keyframes zoom { 
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)} 
} 

@keyframes zoom { 
    from {transform:scale(0)} 
    to {transform:scale(1)} 
} 

/* The Close Button */ 
.close { 
    position: absolute; 
    top: 15px; 
    right: 35px; 
    color: #f1f1f1; 
    font-size: 40px; 
    font-weight: bold; 
    transition: 0.3s; 
} 

.close:hover, 
.close:focus { 
    color: #bbb; 
    text-decoration: none; 
    cursor: pointer; 
} 

/* 100% Image Width on Smaller Screens */ 
@media only screen and (max-width: 700px){ 
    .modal-content { 
     width: 100%; 
    } 
} 

여기

입니다 자바 스크립트 : 당신이 PDF "로 무슨 뜻인지 나에게 분명하지 않다

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the image and insert it inside the modal - use its "alt" text as a caption 
var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 
img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    modalImg.alt = this.alt; 
    captionText.innerHTML = this.alt; 
} 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

Answer 1

모달 "이지만 PDF 파일의 내용을 모달 안에 표시하려고한다고 가정합니다.

How to display a pdf in a modal window?