How to remove edges and make the background of a Modal window transparent

Question

I have a modal window that displays a Spinner to indicate the loading of a page. The problem is this modal needs to be without the edges and with transparent background. Someone knows how to help me?

<div id="modalSpinner" class="modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="loader vertical-align-middle loader-circle"></div>
        </div>
    </div>
</div>

Answer 1

You can remove by changing class properties .modal-content:

#modalSpinner .modal-content{
   -webkit-box-shadow: none; // retira a sombra
   box-shadow: none; // retira a sombra
   background: transparent; // fundo transparente
   border: none; //  retira a borda
}

This will change only the modal of div#modalSpinner, without affecting the other modals, if there are.

If your CSS is loaded before the Bootstrap CSS, there will be a need to put !important on the estates:

#modalSpinner .modal-content{
   -webkit-box-shadow: none !important; // retira a sombra
   box-shadow: none !important; // retira a sombra
   background: transparent !important; // fundo transparente
   border: none !important; //  retira a borda
}

From what I can tell from the image, the modal doesn’t even have an edge, only the white background and a shading. Maybe there is no need for lines box-shadow.