Question

我有一个按钮，点击后会打开一个包含pdf内容的模态。我有一份清单。

我的问题是，当浏览器加载网站时，它还会加载所有pdf文件。我只想在按下打开一个特定模态的按钮时加载特定的pdf文件。

<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>

Answer 1

更改模式中iframe的src属性。 pdf文件的URL可以存储在按钮的自定义属性中，如果在元素（jquery或简单的javascript）中有iframe，则可以将其属性设置为src。使用js可能是myiframe.setAttribute('src','http://...')，或者使用jquery，它是这样的：myiframe.attr('src','http://...')。我认为最好的解决方案是，如上所述为每个按钮设置pdf网址，如果你可以使用jquery，你可以像这样在网页上添加一段代码：

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

（这只是一个“骨架”，它可能无法正常工作......）

单击按钮时如何将pdf文件加载到模态中？

1 个答案: