如何打开 Foundation Reveal 模态 javascript

Question

我一直在尝试关注 Foundation 文档，但我真的不知道如何使用 jQuery 打开模式窗口。这是我所拥有的：

Fiddle

HTML：

<a href="#" id="myModal" class="reveal-link">Name</a>

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

jQuery:

$(document).ready(function(){
    $(document).foundation();
    $('a.reveal-link').trigger('click');
    $('a.close-reveal-modal').trigger('click');
 });

谢谢，任何帮助将不胜感激！

Answer 1

您错误地在<a> 和<div> 标签上设置了相同的ID。

两种方法：

1. 您的模态框的 id 为“myModal”，因此您应该将属性 data-reveal-id='myModal' 设置为您的 <a> 标签。相反，您设置了 id="myModal"，您应该删除它。您正在使用的 JavaScript 应该适用于此更改。

2. 将<a>标签的id改为id="modalLaucher"，然后使用：

   $("#modalLauncher").click(function (e) {
       $('#myModal').foundation('reveal', 'open');
   });