javascript – WEB | Close modal window with mobile phone back / back button

Question:

Good day,

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

The page is designed for mobile use only . Therefore, it is very common for users to try to close the modal window with the back / back button of their phones, and by doing this they leave the site.

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

I have looked 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"/>
<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>

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 modal-fullscreen class (plugin-specific) in Bootstrap modalities and nothing else , the rest is done by JS.

You can see its operation from mobile devices in this demo .

If you do not want to use the styles that this plugin brings, they can be eliminated 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()
    })
});
Scroll to Top