0

Zurb のjQuery Reveal Modalプラグインを使用して、Vimeo ビデオのポップアップ ボックスを作成しています。ただし、ページが読み込まれるとすぐに最後のビデオがコンテンツの上に表示されて消えず、他のビデオはそれぞれのモーダル ウィンドウの閉じるボタンを押しても消えません。ボックスとその中の他のコンテンツは消えますが、ビデオの iframe は消えません。

トリガーとモーダル ボックスのマークアップは次のとおりです。

<div class="videoEntry">
    <h3>Community Involvement</h3>
        <a href="#" data-reveal-id="modal4"><img class="videoThumb" src="images/community-video_thumb.jpg" /></a>
        <p>Corvalent Corporation CEO Ed Trevis talks about Chirofit's Corporate Wellness programs and Dr. Mo's involvement in the Cedar Park and Austin communities.</p>
        <div id="modal4" class="reveal-modal">
            <h1>Modal Title</h1>
            <iframe src="//player.vimeo.com/video/74992379" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/74992379">Chirofit and Community</a> from <a href="http://vimeo.com/user20693845">Chirofit</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
            <a class="close-reveal-modal">&#215;</a>
        </div>
    </div>

CSS および JS ファイルはまったく変更されておらず、そのまま含まれています。Reveal.css ファイルはヘッダーにあり、jquery.reveal.js ファイルは、Google の CDN でホストされている最新バージョンの jquery への呼び出しのすぐ下のフッターにあります。

何が原因なのか途方に暮れています。私は友人のためにこれを行っていますが、彼のテーブルベースのサイトに問題があるのではないかと考え始めています。多くの場合、予期しない動作が発生します。これに関する任意の入力は、非常に高く評価されます。

サイトはここで見ることができます。

4

1 に答える 1