当用户在我的网站上执行操作时,我想使用 spin.js 库,但我看不到如何或是否可以禁用微调器所在的元素。 例如,当我的网格加载时,我不希望用户单击网格本身的任何地方。
谢谢!
Steven 的答案可以禁用页面 - 但是,我发现如果我使用该方法,页面上的其他元素仍然被阻止并且无法单击。您可以通过隐藏并根据需要显示元素来绕过它 - 但是,当我这样做时,我发现 SpinJS 微调器停止居中并最终位于左上角。
最后,我将SpinJS与JQuery BlockUI插件相结合,该插件在页面上临时放置了一个覆盖层,并防止任何点击,并提供一些可自定义的选项。
所以最后,我的代码看起来像...
var target = document.getElementById("centre");
var spinner = new Spinner(opts).spin(target);
$.blockUI({ message: null, overlayCSS: { backgroundColor: '#ddd' } });
//Things things things
spinner.stop();
$.unblockUI();
Spin.js只是一个动画旋转动画。如果你想关闭"它后面"的其他一切,我假设它在一个模态窗口中,在这种情况下,你只需要一个 100% 的宽度和高度div,其 z 索引高于所有其他带有微调器的元素的 z-index。
所以像
<div style="width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:9999;">
SPIN STUFF with z-index 10000;
</div>
这将覆盖每个元素并防止他们点击它。
如果我读错了你的问题,请告诉我。
我在spin.js中添加了块UI,它使用bootstrap css,因为这是我使用的,但你可以根据自己的需要调整它。
旋转背景