时间戳

首页 > 解决方案 > 5000个onclick()弹窗转模态的策略

javascript - 5000个onclick()弹窗转模态的策略

问题描述

我已经处理了 5,000 个不同的 HTML 实例，像这样...... 


<p class="ltprg">
        <a href="thumbs.php?img=img3/pr600901.jpg&amp;alt=01_September_1960_Events_Programme"
        title="View programme image in new window" onclick="newpop(this.href,'rel','740','520'); return false;"><img
        src="img3/prgcvr16z.jpg" width="90" height="119" alt="" title="01 September 1960 Programme"
        /><br />
        <span class="xtr xbr">01 Sept</span><br />
        Programme</a></p>

不要对我大喊大叫，自 2004 年以来，我一直在这个网站上工作（最初是在表格中），经过几年的中断，我最近才从 XHTML Strict 更新到 HTML5，所以每个页面都经过验证，并且希望仍然如此。

这种现有方法有一些野心，因为我可以将图像放在新窗口中作为背景，以防止盗窃或直接链接。至少后者在我介绍这种方法后就停止了。现在我的理解失败了，通过弹出窗口，我可以创建一个新的 DOM 来简单地显示图片，但这不能在模式中发生。我的一些页面可以有多达 40 个此代码的实例，它们都是独一无二的，因为它们将带有每日节目或膳食菜单封面和内容的图像。

显然，如果我可以用 Regex 半自动化更改现有代码的过程，那将节省大量工作。每个链接都有菜单/程序封面的图像缩略图和描述其目的地的文本以及远程窗口图形，所有这些都是出于可访问性的原因，作为一个手笨的人，我想保留而不是转换为按钮.

所以目前，主 DOM 准备好接受链接目标、其内容、标题和窗口大小的 JS 脚本，然后对任何给定的点击做出相应的反应。新的 DOM（由 thumbs.php 创建）有自己的 CSS 和关闭按钮，将图片显示为 CSS 背景图像和框内的标题。随着谷歌浏览器的流行，窗口尺寸目前一团糟：/

所以，我的问题归结为如何构建模态实例。

(1) 我是否只需在我的 HTML 末尾加载一个 PHP 包含/要求？

(2) 如果是这样，我如何解析内容的信息？

(3) 我可以保留图像/文本链接而不是使用按钮吗？

在这一点上，我仍在努力了解如何“动态”将 HTML 构建到主 DOM 中的过程，所以作为我的标题，我仍在研究我的策略应该是什么，而不是代码。例如，我可以使用现有的“thumbs.php”和具有不同代码的 newpop() 调用吗？

我担心我最终会在主页上添加大量新代码，而我想避免使用超过 1,000 页的代码。我也希望避免在页面加载时加载许多大图像（我不知道/认识到我在做什么），并且还希望直接获取图像尺寸并影响 CSS 以相应地调整模态。

如果您想查看当前的代码，请访问... Caronia 1960 年 9 月页面

感谢您的关注 ：）

标签： javascripthtmlcss

解决方案

我不认为这应该像你想象的那么难。这是一个示例，说明如何使用您提供的 html 执行此操作。无论您使用什么 php 来生成该 html，您都可以使用它来生成以下内容。

<p class="ltprg">
  <a title="View programme image in new window" onclick="showModal('img3/prgcvr16z.jpg', '01 September 1960 Programme')"><img
src="https://www.caronia2.info/img3/prgcvr16z.jpg" width="90" height="119" alt="" title="01 September 1960 Programme"
/><br />
<span class="xtr xbr">01 Sept</span><br />
Programme</a></p>

推荐阅读