2

当用户在我的网站上执行操作时,我想使用 spin.js 库,但我没有看到如何或是否可以禁用微调器所在的元素。例如,当我的网格正在加载时,我不希望用户单击网格本身的任何位置。

谢谢!

4

3 回答 3

2

Spin.js 只是一个动画旋转动画。如果您想关闭“背后”的所有其他内容,我假设它位于模式窗口中,在这种情况下,您只需要一个 100% 的宽度和高度 div,其 z-index 高于带有微调器的所有其他元素在上面。

所以像

<div style="width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:9999;">
SPIN STUFF with z-index 10000;
</div>

这将覆盖每个元素并阻止他们点击它。

如果我读错了你的问题,请告诉我。

于 2013-01-25T20:45:05.387 回答
2

史蒂文的回答可以禁用页面 - 但是,我发现如果我使用该方法,页面上的其他元素仍然被阻止并且无法单击。您可以根据需要通过隐藏和显示元素来解决它 - 但是,当我这样做时,我发现 SpinJS 微调器停止居中并最终位于左上角。

最后,我将 SpinJS 与JQuery BlockUI Plugin结合起来,它会在页面上临时覆盖并防止任何点击,并提供一些可自定义的选项。

所以最后,我的代码看起来像......

var target = document.getElementById("centre");
var spinner = new Spinner(opts).spin(target);
$.blockUI({ message: null, overlayCSS: { backgroundColor: '#ddd' } });

//Things things things  

spinner.stop();
$.unblockUI();
于 2014-01-09T15:39:48.660 回答
0

我在 spin.js 中添加了块 UI,它使用引导 css,因为这是我使用的,但您可以根据自己的需要调整它。

自旋背景

于 2016-02-08T12:50:59.913 回答