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">×</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.
.modal-backdrop
y disminuye el valor en la propiedadz-index
. También podrías aumentar ese valor en la clase.modal-dialog