我在引导网站上使用了intro.js“提示”插件(https://introjs.com/example/hint/index.htmlhttps://introjs.com/docs/hints/api/)。我需要在引导模态上工作的提示,但是这些提示显示在模态窗口的后面。我尝试调整.introjs-hint-pulse和.introjs-hint-dot选择器以及.modal选择器的z索引,但没有结果。

我需要做什么才能使提示显示在模态窗口上方的任何想法?

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

我包含了提示API的链接,因为它显示了刷新和隐藏提示的选项,但是我是jQuery&JS的新手,并且不确定如何使其工作。

另外,我正在尝试找出一种方法,如果在模态关闭且仍可见的情况下自动隐藏模态上的提示。

我有一个带有测试模式和intro.js提示的jsfiddle。如果打开模态,然后单击“显示提示”链接,您会发现提示不可见。但是,如果您关闭模态,则可以看到模态窗口后面的提示可见。
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外部资源中链接在一起以供查看。

最佳答案

尝试使用此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/

10-05 20:39
查看更多