zurb Foundation 5.4 Joyride - 控制暴露盖

Posted 2023-05-09

【中文标题】zurb Foundation 5.4 Joyride - 控制暴露盖

【英文标题】：zurb foundation 5.4 joyride - control expose cover

【发布时间】：2014-10-16 22:05:33

【问题描述】：

有人可以向我解释如何控制 zurb 基础的暴露覆盖吗？ 如果我理解正确，expose-cover 是显示在兜风模式后面的灰色背景叠加层。

我有一些提示没有绑定到任何东西，然后我有一些使用 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>

【参考方案1】：

我认为当前的 Joyride Foundation 集成不允许您单独更改公开选项。您只能在整个兜风期间启用/禁用它。

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

【参考方案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 为必填项

【参考方案3】：

我没有找到解决方案，但这个

$(document).foundation(offcanvas: close_on_click: false, 显示: close_on_esc: true, close_on_background_click: true, 兜风: cookie_monster: false, expose: true, modal: true, post_expose_callback: function ( ) 设置超时（函数（） $(".joyride-modal-bg").css("display", "block"); ,5); ).foundation('joyride', 'start');