根据调用的超链接 ID 自定义弹出窗口

Posted 2023-02-24

【中文标题】根据调用的超链接 ID 自定义弹出窗口

【英文标题】：Customizing popup window based on it's calling hyperlink Ids

【发布时间】：2015-12-06 14:14:16

【问题描述】：

我有一个描述社区成员的 html 代码，例如“K S Lenscapes”和“Venky P G”，在点击时会调用模态弹出窗口#visit

<div class="portfolio-info">
    <a href="#visit" id="ks" ><h3>K S Lenscapes</h3></a>
</div>

<div class="portfolio-info">
    <a href="#visit" id="vpg"><h3>Venky P G</h3></a>
</div>

这是#visit 代码：

<div id="visit" class="modalDialog">
    <div>
	<a href="#close" title="Close" class="close">X</a><br><br>    	
        <div class="text-center">
            <p><a class="btn btn-primary btn-lg" href="#" id="ba">Book Appointment</a></p>
	</div>
    </div>
</div>

我需要#visit 的“预约”按钮来识别它是从哪个锚标签请求的，并将邮件发送到相应的投资组合，从文件或数据库中获取其电子邮件。

我不知道该怎么做，请帮我解决这个问题。

【问题讨论】：

这只是标记。有没有与此相关的 js 试验？

不，我没有任何与此相关的 js 线索。你能帮我解决这个问题吗？

【参考方案1】：

您可以为此使用data 属性

<div class="portfolio-info">
    <a href="#visit" id="ks" data-url="URL TO POST THE DATA"><h3>K S Lenscapes</h3></a>
</div>

<div class="portfolio-info">
    <a href="#visit" id="vpg" data-url="URL TO POST THE DATA"><h3>Venky P G</h3></a>
</div>

并在打开对话框时更新预约的 href URL。

在这种情况下，数据变量可以像$('selector').data('url')一样调用

【参考方案2】：

HTML：

<a href="#visit" id="fpp" onclick="updatePopup(this.id);"><h3>Bar</h3></a>

JavaScript：

function updatePopup(id) 
    document.getElementById('ba').href = 'path/to/handler?id=' + id;

更新后的 HTML 会在点击时将链接 ID 传递给函数，并且 javascript 会相应地更新弹出窗口的“预约”按钮。

然后，ID 将在您希望处理电子邮件发送部分的 URL 的查询字符串中传递。从数据库中检索电子邮件并向其发送电子邮件是一个完全不同且范围更广的问题，我相信您将能够在网站的其他地方找到有关如何执行此操作的信息。