模态框不会弹出

Question

如何使用此图像打开模态框？

<div class="grid">
            <figure class="effect-apollo">
                <a href="#modal-ef" role="button" data-toggle="modal">
                    <img  src="http://i.imgur.com/KDlptL.png">
                </a>
                <figcaption>
                    <h2>Strong <span>Apollo</span></h2>
                    <p>Apollo's last game of pool was so strange.</p>
                </figcaption>           
            </figure>
        </div>

我尝试将图片用作链接，但没有成功。 模态本身看起来像这样：

<div id="modal-ef" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close">&times;</span>
                    <h2></h2>
                </div>
                <div class="modal-body">
                    <!--<div class="avatar">
                        <img src="http://i.imgur.com/DsekuY7.gif alt="" />
                    </div>-->
                    <p></p>
                </div>
                <div class="modal-footer"></div>
          </div>
        </div>      

Answer 1

我认为你应该把img和figcaption放在＆lt; a＆gt ;,像这样：

<div class="grid">
                <figure class="effect-apollo">
                    <a class="modal-button" data-content="ef">
                        <img  src="#">
                        <figcaption>
                            <h2>Strong <span>Apollo</span></h2>
                            <p></p>
                        </figcaption>   
                    </a>        
                </figure>
            </div>