我在引导网站上使用了intro.js“提示”插件(https://introjs.com/example/hint/index.html,https://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">×</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> 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(" Show Hints");
introJs().hideHints();
} else {
$("#txtToggle").html(" Hide Hints");
introJs().showHints();
}
hints = !hints;
}
检查提琴是否已更新:http://jsfiddle.net/beaver71/fc0rkakn/