javascriptjquerycssspin.js

How to get spin.js behind a modal


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 enter image description here


Solution

  • 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/