Question

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

谢谢！

Answer 1

Spin.js只是一个动画旋转动画。如果你想关闭“它背后”的所有其他东西，我认为它在一个模态窗口中，在这种情况下你只需要一个100％的宽度和高度div，其z-index高于每个其他元素的z-index和微调器在它上面。

类似

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

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

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

Answer 2

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

最后，我将SpinJS与the 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();

Answer 3

我为spin.js添加了块UI，它使用了bootstrap css，因为这是我使用的，但你可以根据自己的需要进行调整。

spin.backdrop

Spin.js - 加载时禁用元素

3 个答案: