CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
FadiY
FadiY

Reputation: 119

How do I load my pdf file into my modal when the button is clicked?

I have a button that, when clicked, opens a modal with pdf content. I have a list of these.

My problem is that when the browser loads the website it also loads all the pdf files. I want a specific pdf file to load only when I press a button that opens one specific modal.

<li>

    <div class="row">
        <div class="col-md-2" style="border: 1px solid black; height:200px;">
            <img src="Images/ImmanuelKant.jpg" style="padding:5px;" height="198" width="150">

        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">
                    <h2>Immanuel Kant</h2>
                    <h3>something</h3>
                    <p>

                    </p>


                    <!-- Modal -->
                    <div style="display: block;" class="modal modal-wide fade in" id="läsModal8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
                        <div class="modal-dialog">
                            <div class=" modal-content">

                                <div class="modal-body">
                                   <iframe class="pdfContainer" src="ViewerJS/../Books/SomePdf.pdf" allowfullscreen="" webkitallowfullscreen="" height="700px" width="100%"></iframe>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">close</button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="col-md-6">

                        sometext


                    <a href="http://en.wikipedia.org/wiki/Immanuel_Kant" target="_blank">read about</a>

                </div>
            </div>
            <hr>
            <form>
            <div class="row">
                <div class="col-md-2">
                    <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#läsModal8">
                        read
                    </button>

                </div>
                <div class="col-md-6">

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

    </div>
    <br>
    <hr style="border-color:rgba(0, 0, 0, .3);">
    <br>
</li>

Upvotes: 0

Views: 924

Answers (1)

nvi9
nvi9

Reputation: 1893

Change the src attribute of the iframe in the modal. The urls of the pdf files can be stored in a custom attribute of the buttons, and if you have the iframe in an element (jquery or simple javascript), you can set its attributes as src too. With js maybe it's the myiframe.setAttribute('src','http://...'), or with jquery it is something like this: myiframe.attr('src','http://...'). The best solution I think, if you set the pdf url for each button as I mentioned above, and if you can use jquery, you add a piece of code to the page like this:

jQuery('.modalbutton').click(function(){
  var pdf = jQuery(this).attr('data-pdfurl');
  jQuery('iframe #modal').attr('src', pdf);
});

(this is just a "skeleton", it might not work correctly...)

Upvotes: 1

Related Questions