基金会揭示无法识别模态链接

Question

我正在为网站上的模态使用基础揭示，但是当我单击模态触发链接时，它不会将其视为模态，而只看到锚点"#"。该网站 dev.birddartmouth.co.uk

这是我输出的模态 HTML：

<a href="#" class="item" data-reveal-id="292">
    <img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg">
</a>
<div id="292" class="reveal-modal">
    <i class="close icon close-reveal-modal"></i>
    <div class="header">
        Bow tie neck silk overlay top/dress with sequin hem – cream, grey                                           <p>£0</p>
    </div>
    <div class="content">
        <img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg">
    </div>
</div><!-- /modal -->

foundation.min.js 和 foundation.reveal.js 文件都加载在 head 中。我已经按照基金会文档（http://foundation.zurb.com/docs/components/reveal.html）上的说明进行操作 - 任何人都可以看到我做错了什么吗？

Answer 1

代码没有问题。您可以尝试使用 Jquery 手动打开模态

<a href="#" class="item" data-reveal-id="292">
<img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg" width="200" height="200">

<div id="292" class="reveal-modal"> <i class="close icon close-reveal-modal">x</i> //x for close button
    <div class="header">Bow tie neck silk overlay top/dress with sequin hem – cream, grey
        <p>£0</p>
    </div>
    <div class="content">
        <img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg">
    </div>
</div>

Jquery

$(document).on('click', '.item', function () {
    var id = $(this).attr('data-reveal-id');
    $('#' + id).foundation('reveal', 'open');
});

$(document).on('click', '.close-reveal-modal', function () {
    $(this).parent().foundation('reveal', 'close');
});

杰斯菲德尔 http://jsfiddle.net/rFLE3/