0

Necesito por medio de un formulario al enviarlo se muestre un spinner con fondo negro que no le permita al usuario hacer alguna función o dar click en alguna parte de la pagina.

mi spinner funciona, al enviar un formulario, pero no se muestra como una pagina modal.

html


<div class="loader">
                        <img src="Spinner-1s-200px.gif" />
                    </div>

css

.loader {
  display: none;
}

.loader.active {
  display: block;
}

JS

<script>

        $("#formulario").submit(function(e){
            $(".loader").addClass("active");
        });

        </script> 

1 respuesta 1

0

El css está incompleto para volverlo un modal... tienes que darle un tamaño, una posición e idealmente un z-index y background para que aparezca como modal...

const button =document.querySelector('button');
const spinner = document.querySelector('.loader');

button.addEventListener('click', function() {
  spinner.classList.add('active');
});

spinner.addEventListener('click', function() {
  spinner.classList.remove('active');
})
.loader {
  display: none;
  position:fixed;
  height: 100%;
  width: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.8);
}

.loader.active {

  display: block;
}
<div class="loader">
                        <img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" />
                    </div>
                    
 <button>
    click me
 </button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.