Question

我在bootstrap网站上使用了intro.js“hints”插件（https://introjs.com/example/hint/index.html，https://introjs.com/docs/hints/api/）。我需要提示来处理引导模态，但提示会显示在模态窗口后面。我尝试调整.introjs-hint-pulse的z-index和.introjs-hint-dot选择器以及.modal选择器没有结果。

根据需要，我需要做些什么才能让提示显示在模态窗口上方？

我还需要弄清楚如何一次隐藏所有显示的提示，但是当重新点击链接时能够再次显示它们 - 就像切换一样。我有一个用于显示提示的图标，我希望能够再次单击以切换和隐藏提示。

我包含提示API的链接，因为它显示了刷新和隐藏提示的选项，但我是jQuery＆amp;的新手。 JS，我不知道如何让它发挥作用。

此外，我试图找出一种方法来自动隐藏模态上的提示，如果模态关闭时它们仍然可见。

我有一个带有测试模式的jsfiddle和intro.js提示。如果打开模态，然后单击“显示提示”链接，您会注意到提示不可见。但是如果你关闭模态，你可以看到提示在模态窗口后面可见。 JS小提琴链接：http://jsfiddle.net/1aeur58f/998/

示例的HTML：

<!-- Button trigger modal -->
<a href="#notesModal" data-toggle="modal" role="dialog" id="btnOpenModal" class="btn btn-primary">Open Notes Modal</a>

<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Notes</h4>
      </div>
      <div class="modal-body">
          <div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
               <input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
          </div>
      </div>
      <div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="bottom-right-aligned" style="margin-left:15px;">0/300
      </div>          
      <div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i>&nbsp;Show Hints</a></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

intro.js和introjs.css链接在jsfiddle外部资源中供查看。

Answer 1

尝试使用此CSS：

.introjs-hint {
    z-index: 9999999 !important;
}

为了切换提示，您可以（例如）执行此操作：

var hints = false;

function toggleHints() {
    if (hints) {
    $("#txtToggle").html("&nbsp;Show Hints");
    introJs().hideHints();
  } else {
    $("#txtToggle").html("&nbsp;Hide Hints");
    introJs().showHints();
  }
    hints = !hints;
}

检查小提琴已更新：http://jsfiddle.net/beaver71/fc0rkakn/

在引导模态窗口上使用Intro.js提示，提示显示在模态后面

1 个答案: