如何禁用/删除 Foundation Joyride 的右上角“x”？

Posted 2023-05-09

【中文标题】如何禁用/删除 Foundation Joyride 的右上角“x”？

【英文标题】：How can I disable/remove upper right corner "x" from a Foundation Joyride?

【发布时间】：2015-09-23 22:07:59

【问题描述】：

编辑 7/16/15：我最终在兜风的 <li> 标记之间使用了它，我需要禁用“x”。<script>$('.joyride-close-tip').remove();</script> 不是最干净的解决方案，但可以满足我的需要。 原帖 文档是here

如果你打开他们有兜风示例的文档页面，所有兜风的右上角都会有一个“x”，但我不想在 大多数 兜风。

据我所知，从 .scss 文件中删除 $joyride-tip-close 元素并不是一个好习惯。我还想知道如何做到这一点，而不必基本上复制和粘贴所有没有joyride-close-tip部分的joyride scss（这似乎是“x”的样式）。

提前致谢。

【参考方案1】：

找到那个班级class="joyride-close-tip"

用display:none;覆盖它

【讨论】：

我应该澄清一下，即使我按照以下方式做了：<ol class="joyride-list" data-joyride> <li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false"> <p>Hello and welcome to the Joyride <br>documentation page.</p> </li> <li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev"> <h4>Stop #1</h4> <p>You can control all the details for you tour stop. Any valid html will work inside of Joyride.</p> </li> </ol> 没有提到 joyride-close-tip 类，那么无论如何 x 仍然会出现。

【参考方案2】：

您可以通过在选项中为link 指定一个空白模板来删除它。但要做到这一点，您需要重新定义 HTML 模板，如下所示……

$(document).foundation(
  joyride: 
    template: 
      link        : '',
      tip         : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
      wrapper     : '<div class="joyride-content-wrapper"></div>',
      button      : '<a href="#" class="small button joyride-next-tip"></a>',
      prev_button : '<a href="#" class="small button joyride-prev-tip"></a>'
    
  
).foundation('joyride', 'start');

见http://foundation.zurb.com/docs/components/joyride.html

【讨论】：

你可以做的不是重新定义：template: $.extend(true, , Foundation.libs.joyride.defaults.template, link: '')