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文件都加载到头部。我按照基础文档（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');
});

Jsfiddle http://jsfiddle.net/rFLE3/

基础揭示不承认模态链接

1 个答案: