javascript - HTML 弹出 PDF

Question

我目前正在制作一个基本的网站来娱乐我的工作。该网站将帮助我们节省纸张，因此我们不必打印所有内容，我们可以拥有一个包含我们需要的所有 .PDF 文件的网站。

现在我才刚刚开始。我正在使用 Microsoft Web Expression 4。我创建了一个 DWT，因此我创建的所有页面都将相互模仿。我为网站所有好看的部分创建了一个 mystyles.css。我已经为我需要的任何 JavaScript 创建了一个 myscripts.js(虽然我现在还不知道该放什么)。

我的问题是在尝试添加弹出窗口时出现的。例如，当我点击一个写着“Channel Line Up”的小横幅时，我希望页面内弹出窗口与 PDF 文件一起出现，我可以在其中 CTRLF 对于某些 channel ，我可以在弹出窗口外单击，它会 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 每页只能出现一次。您的 anchor 链接应指向您要打开的特定 div。

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