3

この件に関して別の質問がありましたが、完全な解決策が投稿されたようには見えず、リンクされていた例がアクティブではなくなったため、この質問を投稿しています。

ページの読み込み時に Zurb Foundation Reveal モーダルを開く方法を探しています (より具体的には、ページの読み込みの数秒後に開きたいと思います)。私は JavaScript を書いていないので、何をする必要があるかについてはある程度の知識しかありません。そのため、賢い JS の人々が私を助けてくれることを願っています。

すぐに使えるように Reveal を使用したい場合は、次のようにします。

1) 次のような「openMyModal」のような ID を持つリンクをページに含めます。

<a href="#" id="openMyModal">This is my modal-opening link</a>

2) フッターに、その ID でクリック イベントをリッスンし、ID で指定された対応するモーダルを開く JS を含めます。

<script type="text/javascript">
    $(document).ready(function() {
        $("#openMyModal").click(function() {
            $("#myModal").reveal();
        });
    });
</script>

3) ヘッダーまたはフッターに jQuery を含める

4) タグの直前のフッターのどこかに、上記の ID を持つ div 内にモーダル コンテンツを挿入します。

<div id="myModal">
    This is my modal window.
</div>

それはうまくいきます。しかし、それは、ユーザーの操作に基づいてモーダルを開きたい場合 (つまり、提供されたリンクをクリックする場合) にのみ適用されます。

しかし、私が望んでいたのは、ページの読み込みが完了してから 5 秒後にモーダルを自動的に開くことでした。当然、フッターにjQueryを含む、以前と同様にモーダルの特定のIDを持つDIVを意味することを期待しています-これを呼び出すjavascript自体が特定のリンクのクリックをリッスンしないことを除いて、基本的に同じセットアップです特定の ID ではなく、単に DOM が読み込まれるのを待ち、指定された秒数 (またはミリ秒) 待ってから自動的に起動します。

これをどのように達成できるか誰か教えてもらえますか?

4

3 に答える 3

3

Foundation 4を使用している可能性はありますか? 構文は次のように少し変更されました。

<script type="text/javascript">
  $(document).ready(function() {
    setTimeout(function(){
      $("#myModal").foundation('reveal', 'open');
    }, 5000);
  });
</script>
于 2013-04-10T17:44:19.947 に答える
0

以下を使用して、ページを開いたときにZurbのモーダルを時間遅延で起動しました。

jQuery(document).ready(function($) {

    /* Pop-up
    ================================================= */
    $(function() {
        function showpanel() {
        $('.reveal-modal').reveal({
            animation: 'fade',
            animationspeed: 800
        });
        }
        setTimeout(showpanel, 4000)
    }); 
});
于 2013-11-25T12:55:11.370 に答える