8

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>

1
  • Jheyman estas cargando la página en un WebView?, aporta mas detalles. @Jheyman Mejia
    – Jorgesys
    el 4 may. 2018 a las 17:07

2 respuestas 2

6

Después de mucho tiempo encontré este plugin: https://github.com/keaukraine/bootstrap-fs-modal muy liviano y muy sencillo de configurar:

¿Qué debes hacer? Aplicar en los modales de Bootstrap la clase modal-fullscreen (propia del plugin) y nada más, el resto lo realiza JS.

Pueden ver desde dispositivos móviles su funcionamiento en esta demo.

Si no desean usar los estilos que trae este plugin, se pueden eliminar dejando funcional únicamente el JS que comparto a continuación:

$(function() {
    var t = 0;
    $("body").on("show.bs.modal", ".modal.modal-fullscreen", function() {
        var a, o = $(this),
            n = o.find('.modal-footer .btn:not([data-dismiss="modal"])');
        o.find(".modal-header .pull-right, .modal-header [data-additional-close]").remove(), $('<div class="pull-right fullscreen-buttons">').prependTo(o.find(".modal-header")), $.each(n, function() {
            var a, n = t++,
                d = $(this),
                l = d.data("glyphicon"),
                e = d.data("faicon"),
                i = d.data("mobileText") || d.text();
            $(this).attr("data-button-tag", n), l || e ? (a = $("<button>").attr("title", i).attr("data-toggle", "tooltip").attr("data-placement", "bottom"), l && $('<i class="glyphicon ' + l + '">').appendTo(a), e && $('<i class="fa fa-2x ' + e + '">').appendTo(a)) : a = $("<button>").text(i), a.addClass("btn btn-link").attr("data-button-tag", n).appendTo(o.find(".modal-header .fullscreen-buttons:last")), (l || e) && a.tooltip()
        }), $('<button class="btn btn-link btn-lg" type="button" data-dismiss="modal" aria-label="Close" data-additional-close>').prependTo(o.find(".modal-header")), $('<i class="glyphicon glyphicon-chevron-left">').prependTo(o.find(".modal-header button:first")), history.pushState(null, null, null), a = function() {
            o.data("hidden-by-back", !0), o.modal("hide")
        }, $(window).one("popstate.fs-modal", a), o.one("hide.bs.modal", function() {
            $(window).off(".fs-modal", a), o.data("hidden-by-back") || history.back(), o.data("hidden-by-back", null)
        })
    }), $("body").on("click", ".modal-header .fullscreen-buttons .btn-link", function(t) {
        var a = $(this),
            o = a.data("buttonTag");
        a.parents(".modal-content").find(".modal-footer").find('[data-button-tag="' + o + '"]').click()
    })
});

2

No hay una manera de hacerlo para Android sólo con JS o jQuery.

No se puede.

Lo que puedes hacer es controlar la navegación y cuando se presione ese botón haga la función que deseas, como cerrar la ventana modal.

Podrías intentar algo así (por supuesto tienes que adaptar-lo a tu código, pero es lo que te puedo facilitar sin ver el tuyo):

<script>
$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    event.preventDefault();//evita hacer la acción por defecto, volver atrás
    $(elementoModal).hide();
    window.history.forward(1);//volvemos donde estabamos
  }
});
</script>
2
  • 2
    Si se puede realizar, mediante una Javascript Interface en Android.
    – Jorgesys
    el 4 may. 2018 a las 17:03
  • Hola Lucas, acabo de compartir el código, es un simple modal a pantalla completo. En su tiempo intenté adaptar tu código sin éxito, pero realmente deseo que funcione. Gracias el 12 sep. 2018 a las 13:23

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.