Как встроить внешний pdf в модальный диалог загрузки?

Question

У меня есть внешний pdf, который я хотел бы показать встроенным в мою страницу. Следующие работает отлично:

<object frame-resize data="www.cbu.edu.zm/downloads/pdf-sample.pdf" type="application/pdf" width="200px" height="200px"></object> 

Проблема: Я хочу показать этот встроенный PDF в modal окне. Но как только я переместить его туда, PDF отображается неправильно больше:

<a data-toggle="modal" data-target=".my-modal"></div> 

      <div class="modal fade my-modal" tabindex="-1" role="dialog"> 
       <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 

        <div class="modal-body"> 
        <object frame-resize data="www.cbu.edu.zm/downloads/pdf-sample.pdf" type="application/pdf" width="200px" height="200px"></object> 
        </div> 

       </div> 
       </div> 
      </div> 

Результат: Я получаю следующее сообщение об ошибке:

offsetParent is not set -- cannot scroll viewer.js:150:5 
scrollIntoView() viewer.js:150 
PDFViewer_scrollPageIntoView() viewer.js:4880 
pagechange() viewer.js:7394 
PDFViewer.prototype.currentPageNumber() viewer.js:4558 
pdfViewSetInitialView() viewer.js:6697 
resolved() 
PDF 0bf9e083c3a94f2cd2e1740080c8c88c [1.4 Acrobat Distiller 7.0.5 (Windows)/Adobe Acrobat 7.0] (PDF.js: 1.1.215) 
TypeError: canvas._viewport is undefined 
NotFoundError: Node was not found 

Как я могу хотя встроить это в модальном диалог?

Интересно, что когда я закрываю модальный диалог и открываю его снова, файл pdf отображается правильно!

Update:

Решение: Я имел css тег следующим образом:

html { 
    overflow-y: scroll; 
} 

Это предотвращает смещение содержимого, когда веб-страница превышает высоту видимого содержимого.

Вопрос: кто-нибудь знает, как я могу сохранить этот тег и игнорировать его только для модального окна?

Answer 1

Измените свойство transform вашего модального диалога на none.

.modal-dialog { 
    transform: none; 
}