Buen día,
Estoy diseñando un sitio web que funciona básicamente en 1 sola página, toda la información se muestra pulsando botones que abren una ventana modal, y se cierra presionando un botón hide
(dismiss).
La página está diseñada para uso exclusivo en móviles. Por lo tanto, es muy común que los usuarios intenten cerrar la ventana modal con el botón atrás/regresar de sus teléfonos, y al hacer esto salen del sitio.
Puedo implementar (talvez con JS) un código para cerrar el modal con este botón que traen los móviles?
He buscado información pero sólo la encuentro para Apps de Android, no para páginas web.
.modal-full {
min-width: 100%;
margin: 0;
}
.modal-full .modal-content {
min-height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Launch modal</a>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-full" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-4" id="result">
<p>The grid inside the modal is responsive too..</p>
<div class="row">
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>