Question

有人可以向我解释如何控制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>

Answer 1

我认为目前的兜风基础集成不允许您单独更改公开选项。您只能为整个兜风启用/禁用它。

   $(document).foundation({
     joyride: {
       expose: true
     }
   }).foundation('joyride', 'start');

Answer 2

根据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

Answer 3

我发现没有解决方案但是这个

$（document）.foundation（{offcanvas：{close_on_click：false}，显示：{close_on_esc：true，close_on_background_click：true}，joyride：{cookie_monster：false，expose：true，modal：true，post_expose_callback：function（）{ setTimeout（function（）{ $（＆＃34; .joyride-modal-bg＆＃34;）。css（＆＃34; display＆＃34;，＆＃34; block＆＃34;）; }，5）; 基础（＆＃39; joyride＆＃39;，＆＃39; start＆＃39;）;

zurb foundation 5.4 joyride - 控制暴露封面

3 个答案: