HTML弹出PDF

Question

我目前正在制作一个基本的网站，以提高工作效率。 该网站将仅帮助我们节省纸张，因此我们不必打印所有内容，我们只需拥有一个我们需要所有.PDF文件的网站即可。

现在我才刚开始。 我正在使用Microsoft Web Expression4。我已经创建了DWT，所以我创建的所有页面都将相互模仿。 我为网站的所有漂亮部分创建了一个mystyles.css 。 而且我为我需要的任何JavaScript创建了myscripts.js （尽管我现在还不知道该放什么）。

尝试在弹出窗口中添加时出现我的问题。 例如，当我单击显示“ Channel Line Up”的小横幅时，我希望页面内弹出窗口与PDF文件一起显示，可以在其中按CTRL F进入某些频道，我可以在弹出窗口之外单击，将X移开，并且在右上角也有一个X也会关闭。 我已经尝试过模态，但是我无法使其正常工作。 我能够找到的最佳代码是：

<div id="pageone" data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="images\channel.png" alt="Channel Line Up" style="width:850px;"></a>
    <div data-role="popup" id="myPopup">
        <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="images\chlineup.jpg" style="width:1000px;height:2100px;" alt="DirecTV Channel Line Up">
    </div>
</div>

同

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

在我的标题中

这可行（对于JPG，如您在我的代码中看到的），但是当我添加它的多个实例时，在我的标头中保留一个实例，则每次只会拉出同一张图片。

因此，我将重命名并重新获得所有内容，但是无论我单击哪个按钮，它都只会显示我获得的第一张图片。 下面是我的代码：

<div id="pageone" data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="images\channel.png" alt="Channel Line Up" style="width:850px;"></a>
        <div data-role="popup" id="myPopup">
            <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="images\chlineup.jpg" style="width:1000px;height:2100px;" alt="DirecTV Channel Line Up">
        </div>
    </div>

    <div id="pageone" data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="images\buttoncheat.png" alt="Account Creations Cheat Sheet" style="width:850px;"></a>
        <div data-role="popup" id="myPopup">
            <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="C:\Users\bbusa\Desktop\callcenter website\images\cheatsheet.jpg" style="width:800px;height:1111px;" alt="Account Creations Cheat Sheet">
        </div>
    </div>

    <div id="pageone" data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="images\buttonprice.png" alt="Account Creations Price Guide" style="width:850px;"></a>
        <div data-role="popup" id="myPopup">
            <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="C:\Users\bbusa\Desktop\callcenter website\images\pricing.jpg" style="width:1000px;height:2100px;" alt="DirecTV Pricing Guide">
        </div>
    </div>

    <div id="pageone" data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="images\buttonverif.png" alt="Account Creations Verification Script" style="width:850px;"></a>
        <div data-role="popup" id="myPopup">
            <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="C:\Users\bbusa\Desktop\callcenter website\images\verif.jpg" style="width:1000px;height:2100px;" alt="Account Creations Verification Script">
        </div>
    </div>

我究竟做错了什么？ 我应该把它报废并尝试使图像成为MODAL吗？ 我曾尝试使用模式，但我什至无法使它们正常工作。 这个仅适用于第一个按钮。 提前致谢！

Answer 1

您所有的唯一弹出式div都具有相同的ID。 尝试更改此设置，看看是否有帮助。 类别可以重复使用，但ID每页只能出现一次。 您的锚点链接应指向您要打开的特定div。

如果您有兴趣使用第三方解决方案，请研究Lightbox。