I have a modal which shows some figures and in the background I have some spinning wheels from spin.js, which indicate that some work is done (see figure attached). I want the modal to be on top, while currently the spinning wheels are on top of the modal. I can't find a proper doc for spin.js... does anyone know whether that exists? Here is my setup of spin.js
var opts = {
lines: 9, // The number of lines to draw
length: 10, // The length of each line
width: 3, // The line thickness
radius: 6, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000000 ', // #rgb or #rrggbb or array of colors
speed: 0.9, // Rounds per second
trail: 100, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
I figured that zindex might be the tool to get this working? Any idea what I would need to do? thanks carl
You need to set the zIndex
property of the spinner to be lower than that of the modal. For example:
#myModal {
z-index: 100;
}
var opts = {
zIndex: 50,
// other options...
};
For your reference, the spin.js
documentation is here: http://fgnass.github.io/spin.js/