Foundation Zurb 动态显示模态框

Question

我在一个列表中有几个项目，每个项目都有一个删除链接，我想要一个显示模式框，当他们按下带有“是”和“取消”链接的删除按钮时显示。

如果用户按下“是”按钮，则显示模式应重定向到如下内容：

www.url.com/delete/item_id

如何将 item_id 传递给 Reveal 模态框？

基础显示模态框：http://foundation.zurb.com/docs/reveal.php

模态框（item_id 应该传递给模态框）：

<div id="myModal" class="reveal-modal [expand, xlarge, large, medium, small]">
  <h2>Are you sure you want to delete this item?</h2>
  <a href="/delete/item_id">Yes</a>
  <a class="close-reveal-modal">Cancel</a>
</div>

调用显示：

<script type="text/javascript">
  $(document).ready(function() {
    $("#deleteItem").click(function() {
      $("#myModal").reveal();
    });
  });
</script>

HTML（item_id 应该传递给 modal）：

<a href="item_id" class="button" data-reveal-id="myModal" id="deleteItem">Delete Item</a>

Answer 1

在调用.reveal();之前使用jQuery设置值

更新： 见 jsFiddle：http://jsfiddle.net/jgprU/

HTML：

<ul id="deleteItem">
    <li><a href="10">Click Me</a></li>
    <li><a href="20">Click Me</a></li>
    <li><a href="30">Click Me</a></li>
</ul>

<div id="myModal" class="reveal-modal">
  <h2>Are you sure you want to delete <span id="targetName">error</span>?</h2>
  <a id="confirmDelete" href="setMe">Yes</a>
  <a class="close-reveal-modal">Cancel</a>
</div>

​Javascript：

$(document).ready(function() {
  $("#deleteItem a").click(function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    $("#confirmDelete").attr('href','/delete/' + target)
    $("#targetName").text(target);
    $("#myModal").reveal();
  });
});

​