title: PDF in pop up for mobile devices
body: <p>I am working on a project using the C# MvC .NET 4.0 framework with razor.</p>
  
  <p>I have recently jumped onto the bootstrap bandwagon (Bootstrap v3.3.4 )in order to make our website responsive.  I have been trying to find a solution for making pdf's appear as a pop up once clicked.  This pop up would need to be scrollable / closable.</p>
  
  <p>I have investigated two approaches:</p>
  
  <ol>
  <li>Using a partial view / fancybox.  Unfortunately all the examples that came up were purely ASP.NET, hence I could not find anything useful.</li>
  <li><p>Embedding PDF's inside the bootstrap modal with an object tag.  This was only partially successful:  I encountered the following trhee issues whilst browsing and scrolling pdf's embedded in modals on actual mobile devices (iPhone 4S, Safari / Chrome):</p>
  
  <ul>
  <li>Scrolling the PDF too aggressively could cause the modal to crash</li>
  <li>Scrolling in the modal was unreliable, sometimes the background page would scroll instead of the actual modal.  Upon zooming in or out it was often impossible to scroll at all.</li>
  <li>Zooming in and out of the PDF was unreliable; only worked sometimes.</li>
  </ul></li>
  </ol>
  
  <p>For what its worth, below is my .cshtml modal code:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="container"&gt;
      &lt;!-- Trigger the modal with a button --&gt;
      &lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"&gt;Open PDF&lt;/button&gt;
  
      &lt;!-- Modal --&gt;
      &lt;div class="modal fade" id="myModal" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
  
              &lt;!-- Modal content--&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                    &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                    &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body scroll"&gt;
                    &lt;object type="application/pdf" data="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="650"&gt;this is not working as expected&lt;/object&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                    &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;        
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>So the way I see it, either I find a way to return pdfs in a scrollable pop up fancybox / partial view or I find a way to fix the scrolling and reliability issues with the modal as it already works partially, but not reliably as stated above.</p>
  
  <p>Any alternative suggestions as to how to get pdf's to work reliably as pop up's on mobile devices would be greatly appreciated.</p>