Home / Questions / 161610
Accepted
Jheyman Mejia
Asked: 2020-05-05 08:25:00 +0800 CST 2020-05-05 08:25:00 +0800 CST

WEBSITE | Close modal window with mobile phone back/return button

  • 772

Good day,

I'm designing a website that basically works on 1 single page, all information is displayed by pressing buttons that open a modal window, and closed by pressing a button hide( dismiss ).

The page is designed for mobile use only . Therefore, it is very common for users to try to close the modal with the back/return button on their phones, and doing so exits the site.

Can I implement (maybe with JS) a code to close the modal with this button that mobiles bring?

I have searched for information but I only find it for Android Apps, not for web pages.

.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>

javascript

2 Answers

  1. Best Answer

    After a long time I found this plugin: https://github.com/keaukraine/bootstrap-fs-modal very light and very easy to configure :

    What should you do? Apply the class modal-fullscreen(proper to the plugin) in the Bootstrap modals and nothing else , the rest is done by JS.

    You can see how it works in this demo from mobile devices .

    If you do not want to use the styles that this plugin brings, you can remove them, leaving only the JS that I share below functional:

    $(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()
    })
});

    • 6

  2. There isn't a way to do it for Android with just JS or jQuery .

    It can't be done.

    What you can do is control the navigation and when that button is pressed do the function you want, like close the modal window.

    You could try something like this (of course you have to adapt it to your code, but that's what I can give you without seeing yours):

    <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