链接到已打开模式的页面答案

【问题标题】：Link to a page with modal opened already链接到已打开模式的页面
【发布时间】：2014-10-15 14:12:12
【问题描述】：

我有一个包含产品库的网页，每个产品都会打开一个包含其特定信息的模式。每个产品模态都有一个唯一的 id；但是，当打开模式时，URL 没有变化。因此，我无法将某人链接到特定打开的产品模式，只能链接到包含整个图库的页面。

我已经考虑修改 url 以包含 id，并尝试使用 onClick 事件创建超链接，这些事件会在单击链接时触发模式的打开。我不确定这两种方法是否可行。

这是我的模态代码示例：

<ul id="selectable">
<a href="#" data-reveal-id="1">
<li class="ui-state-gal"><b>Modal 1</b></br>
<img src="images/Products/gal/CT8002.png" width="45" height="94"></li>
</a>

<a href="#" data-reveal-id="2">
<li class="ui-state-gal"><b>Modal 2</b></br>
<img src="images/Products/gal/FF310.png" width="45" height="94"></li>
</a>
</ul>

<div id="1" class="reveal-modal">
CT8002
<a class="close-reveal-modal">&#215;</a>
</div>

<div id="2" class="reveal-modal">
FF310
<a class="close-reveal-modal">&#215;</a>
</div>

【问题讨论】：

对不同的产品使用不同的Model ID！
"每个产品模式都有一个唯一的 id"

标签： html url hyperlink modal-dialog

【解决方案1】：

对不同的产品使用不同的唯一型号 ID！

例如：

模型调用

<a href="#" data-reveal-id="1a">
<a href="#" data-reveal-id="2b">
<a href="#" data-reveal-id="3c">

模型数据

<div id="1a" class="reveal-modal">
 Data A
<a class="close-reveal-modal">&#215;</a>
</div>

<div id="2b" class="reveal-modal">
 Data B
<a class="close-reveal-modal">&#215;</a>
</div>

<div id="3c" class="reveal-modal">
 Data C
<a class="close-reveal-modal">&#215;</a>
</div>

在上面的示例中，有三个不同的 ID。 1a, 2b and 3c，因为它会根据定义给它的 ID 和该数据加载数据。

希望对你有帮助！

【讨论】：