CODEWITHSUNDEEP
twitter-bootstrap
schnill
schnill

Reputation: 955

How to render a `pdf file` in a modal in twitter bootstrap?

I am creating a personal web page using twitter-bootstrap 3. I want to render a .pdf file inside a modal. How can i do that? Thanks in advance.

Upvotes: 3

Views: 10067

Answers (1)

Tate Reynolds
Tate Reynolds

Reputation: 113

It would be relatively similar to using the JQuery UI dialog. (http://jqueryui.com/download/) You include these scripts inside tag

<link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>

JQuery code

 <script language="javascript" type="text/javascript">
  $(document).ready(function() {
    $('#trigger').click(function(){
      $("#dialog").dialog();
    }); 
  });                  
</script>

HTML code within (using an iFrame to load the PDF)

<a href="#" id="trigger">this link</a>
<div id="dialog" style="display:none">
    <div>
    <iframe src="yourpdffile.pdf"></iframe>
    </div>
</div>

Upvotes: 2

Related Questions