Spin.js -加载时禁用元素

Question

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

谢谢!

Answer 1

Spin.js只是一个旋转的动画。如果你想关闭它后面的所有东西，我假设它是在一个模式窗口中，在这种情况下，你只需要一个100%的宽度和高度的div，它的z索引比所有其他元素的z索引都要高。

所以就像这样

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

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

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

Answer 2

Steven的回答可以禁用页面--然而，我发现如果我使用这种方法，页面上的其他元素仍然是阻塞的，无法点击。你可以根据需要隐藏和显示元素来绕过它-然而，当我这样做的时候，我发现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