0

Estoy intentando mostrar un modal de Bootstrap, el código:

    <img id="png_agregar" class="mr-5" src="..." title="Pulsa para agregar nueva tarjeta..." data-toggle="modal" data-target="#pepr_add_tarjeta" >

    <!-- Modal -->
    <div class="modal fade" id="pepr_add_tarjeta" tabindex="-1" role="dialog" aria-labelledby="pepr_add_tarjetaTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Agregar nueva tarjeta</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="pepr_titulo">Título</label>
                        <input type="text" class="form-control" id="pepr_titulo" placeholder="Agrega aquí el título de la tarjeta...">
                    </div>
                    <div class="form-group">
                        <label for="pepr_proyecto">Proyecto</label>
                        <input type="text" class="form-control" id="pepr_proyecto" placeholder="Web de la tarea, proyecto, asocidado a...">
                    </div>
                    <div class="form-group">
                        <label for="pepr_descripcion">Descripción</label>
                        <textarea class="form-control" id="pepr_descripcion" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Prioridad y Periodicidad</label>
                    </div>
                    <div class="form-group">
                        <select multiple class="form-control float-left w-50 p-2" id="pepr_prioridad">
                            <option>Baja</option>
                            <option>Media</option>
                            <option>Alta</option>
                        </select>
                        <select multiple class="form-control float-left w-50 p-2" id="pepr_periodicidad">
                            <option>Puntual</option>
                            <option>Diaria</option>
                            <option>Semanal</option>
                            <option>Mensual</option>
                            <option>Anual</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button id="pepr_btn_agregar" type="button" class="btn btn-primary">Agregar</button>
            </div>
            </div>
        </div>
    </div>

    <img id="png_papelera" src="<?php echo plugins_url('/pendproject/img/papelera.png'); ?>" title="Arrastra aquí cualquier tarjeta que quieras borrar...">

</div> <!-- .papelera -->

El código funciona perfectamente en navegadores de PC, el problema viene al intentar ejecutar el código en versiones móviles como el del iPhone o iPad. Tampoco funciona en mi dispositivo Xiaomi Note 3, por lo que entiendo que el problema lo tiene con dispositivos móviles, en general.

El modal se abre correctamente, en móvil, pero sombreado y sin poder interactuar con él, de hecho se queda bloqueada la pantalla, hay que volver a guardar.

2
  • Podrías adjuntar una captura del error? Cuando dices "sombreado" y que no se puede interactuar, es muy probable que se deba a la altura en el eje Z, busca la clase .modal-backdrop y disminuye el valor en la propiedad z-index. También podrías aumentar ese valor en la clase .modal-dialog Commented el 16 sept. 2019 a las 15:53
  • Acabo de publicar cómo lo solucioné. Aun así, voy a probar tu forma pues parece tener más sentido. Gracias. Commented el 17 sept. 2019 a las 16:11

1 respuesta 1

0

Solucionado, al mostrarse el MODAL se generaba un div con clase:

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1041;
    width: 0;
    height: 100vh;
    background-color: #000;
}

Dicha clase tenía un valor width similar al que se muestra en height: 100vh. Lo cambié a 0 y ya podía interactuar con el modal, modificar datos, acceder a sus campos, etc.

1
  • Pero con tu solución estarías "eliminando" el efecto que oscurece el fondo, sería dejar inservible dicha clase. El valor que debe tener la propiedad width es 100vw (que sería algo así como 100% del ancho de la pantalla). Te aconsejo revises mi comentario en la pregunta, pues la solución que aportas no me parece del todo viable. Commented el 17 sept. 2019 a las 18:33

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.