Создание простого PDF-модала

Question

Я хотел бы написать простой pdf-формат, в котором я мог бы написать: 'The sky is blue' нажмите здесь (ссылки на pdf), а затем pdf-мода открывается после щелчка. нашел образец онлайн, похожий, за исключением того, что у него есть картинка плюс картинка мода .
Я хочу, чтобы изображение было заменено кнопкой, и нажатие кнопки открывает формат pdf.

Что я должен изменить?

Im новое для этого веб-сайта. Я экспериментировал и даже имел сигарету, хотя я не курил.

Херес 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 modal ", но я предполагаю, что вы пытаетесь показать содержимое pdf-файла внутри модального?

Возможно, следующий вопрос содержит ответы на некоторые вопросы для вас:

How to display a pdf in a modal window?