gpt4 book ai didi

javascript - HTML 弹出 PDF

转载 作者:行者123 更新时间:2023-11-28 03:46:56 27 4
gpt4 key购买 nike

我目前正在制作一个基本的网站来娱乐我的工作。该网站将帮助我们节省纸张,因此我们不必打印所有内容,我们可以拥有一个包含我们需要的所有 .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 工作吗?我试过使用模式,但我什至无法让它们正常工作。这个有效,但仅适用于第一个按钮。提前致谢!

最佳答案

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

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

关于javascript - HTML 弹出 PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43921838/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com