[英]zurb foundation 5.4 joyride - control expose cover
Can someone explain to me how to control the expose-cover for zurb foundation? 有人可以向我解释如何控制zurb粉底的外露面吗? If I understand correctly the expose-cover is the grey background overlay that shows up behind the joyride modal.
如果我正确理解的话,外罩是灰色的背景叠加层,显示在操纵模态后面。
I have a couple tips not bound to anything and then i have some bound to some ids using the data-id attribute. 我有一些技巧,未绑定任何内容,然后使用data-id属性绑定了一些ID。 I expect that when i get to the tips with data-id the expose cover disappears.
我希望当我获得有关data-id的提示时,外露的封面消失了。 Instead, it remains.
相反,它仍然存在。
What am I doing wrong? 我究竟做错了什么?
<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>
I don't think the current joyride foundation integration let you change the expose option individually. 我认为当前的Joyride Foundation集成无法让您单独更改Exposure选项。 You can only enable/disable it for the whole joyride.
您只能在整个操纵杆上启用/禁用它。
$(document).foundation({
joyride: {
expose: true
}
}).foundation('joyride', 'start');
Based on lepop answer, what you could do is use another modal-bg that you could control as you wish 根据lepop的答案,您可以做的是使用另一个可以根据需要控制的modal-bg
<div class="reveal-modal-bg" style="opacity:0.8;"></div>
<div class="joyride-modal-bg" style="opacity:0;"></div>
and 和
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);
}
Complete code is: 完整的代码是:
<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
and expose: true
are required modal: true
和expose: true
是必需的
i found no solution but this 我没有找到解决方案,但这
$(document).foundation({offcanvas: {close_on_click: false}, reveal: {close_on_esc: true, close_on_background_click: true}, joyride: {cookie_monster: false, expose: true, modal: true, post_expose_callback: function () { setTimeout(function () { $(".joyride-modal-bg").css("display", "block"); },5); }}}).foundation('joyride', 'start'); $ {document).foundation({offcanvas:{close_on_click:false},显示:{close_on_esc:true,close_on_background_click:true},joyride:{cookie_monster:false,暴露:true,modal:true,post_expose_callback:function(){setTimeout (function(){$(“。joyride-modal-bg”)。css(“ display”,“ block”);},5);}}})。foundation('joyride','start');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.