我在一个列表中有几个项目,每个项目都有一个删除链接,我希望当他们按下带有"是"和"取消"链接的删除按钮时显示一个显示模式框。
如果用户按下"是"按钮,则显示模式应重定向到如下所示的内容:
www.url.com/delete/item_id
如何将item_id传递到"显示"模式框?
粉底揭秘模态盒: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 应该传递给模态):
<a href="item_id" class="button" data-reveal-id="myModal" id="deleteItem">Delete Item</a>
在调用.reveal();
之前使用 jQuery 设置值
更新:参见 jsFiddle: http://jsfiddle.net/jgprU/
目录:
<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();
});
});