0

誰かが zurb ファンデーションの露出カバーを制御する方法を説明できますか? 私が正しく理解している場合、エクスポーズカバーはジョイライドモーダルの背後に表示される灰色の背景オーバーレイです。

何にもバインドされていないヒントがいくつかあり、data-id 属性を使用していくつかの ID にバインドされています。data-id のヒントに到達すると、露出カバーが消えると思います。代わりに、それは残ります。

私は何を間違っていますか？

<ol class="joyride-list" data-joyride >
    <li data-button="Next" data-options="prev_button:false;"><p></p>
    </li>

    <li data-button="Next" data-prev-text="Prev">
        <p></p>
    </li>

    <li data-button="Next" data-prev-text="Prev">
        <p></p>
    </li>

    <li data-id="next_article_btn" data-button="Next" data-prev-text="Prev" data-options="expose:false; modal:false;">
        <p></p>
    </li>

    <li data-id="prev_article_btn" data-button="Next" data-prev-text="Prev" data-options="expose:false; modal:false;">
        <p></p>
    </li>

    <li data-id="to_top_btn" data-button="Finish" data-prev-text="Prev" data-options="expose:false;">
        <p></p>
    </li>
</ol>
4

3 に答える 3

0

現在のジョイライド ファウンデーションの統合では、エクスポーズ オプションを個別に変更することはできないと思います。ジョイライド全体でのみ有効/無効にすることができます。

   $(document).foundation({
     joyride: {
       expose: true
     }
   }).foundation('joyride', 'start');
于 2015-06-10T23:46:52.570 に答える
0

lepopの回答に基づいて、あなたができることは、あなたが望むように制御できる別のmodal-bgを使用することです

<div class="reveal-modal-bg" style="opacity:0.8;"></div>
<div class="joyride-modal-bg" style="opacity:0;"></div>

と

pre_ride_callback: 
    function () { 
        setTimeout(function () { 
            $(".reveal-modal-bg").css("display", "block").css("z-index", "100");
        }
    , 150); }
,post_ride_callback: 
    function () { 
        setTimeout(function () {
            $(".reveal-modal-bg").css("display", "none").css("z-index", "1004"); 
        }
    , 5); 
    }

完全なコードは次のとおりです。

<div class="reveal-modal-bg" style="opacity:0.8;"></div>
<div class="joyride-modal-bg" style="opacity:0;"></div>

$(document).foundation({
                    joyride: {
                        cookie_monster: false,
                        expose: true,
                        modal: true,
                        pre_ride_callback: function () { setTimeout(function () { $(".reveal-modal-bg").css("display", "block").css("z-index", "100"); }, 150); },
                        post_ride_callback: function () { setTimeout(function () { $(".reveal-modal-bg").css("display", "none").css("z-index", "1004"); }, 5); }
                    }
                }).foundation('joyride', 'start');

modal: true必須expose: trueです

于 2015-08-11T20:15:56.637 に答える
-1

私は解決策を見つけませんでしたが、これ

$(document).foundation({offcanvas: {close_on_click: false}, Reveal: {close_on_esc: true, close_on_background_click: true}, joyride: {cookie_monster: false, export: true, modal: true, post_expose_callback: function () { setTimeout (function () { $(".joyride-modal-bg").css("display", "block"); },5); }}}).foundation('joyride', 'start');

于 2015-05-20T13:44:10.870 に答える