創建一個簡單的PDF模式

Question

我想要一個簡單的pdf模式，我可以寫：'The sky is blue'點擊這裏（鏈接到PDF），然後點擊PDF模式打開。網上發現一個樣本，除了它有一張圖片加上一個圖片模式 出現。
我想將圖片替換爲一個按鈕，然後單擊該按鈕打開pdf模式。

我應該改變什麼？

林新這個網絡的東西。儘管我不吸菸，但我已經嘗試過，甚至還有香菸。

繼承人的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> 

繼承人的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%; 
    } 
} 

這裏是JavaScript：

// 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什麼不是很清楚，我模態「，但我假設你正試圖顯示一個模態內的PDF文件的內容？

也許以下問題包含了你一些答案：

How to display a pdf in a modal window?