Вопросы Теги

ВЕБ | Закрывать модальное окно с кнопкой назад / возвращаться мобильного телефона

Хороший день,

Я разрабатываю веб сайт, который функционирует главным образом на 1 единственной странице, вся информация является нажимая кнопки, которые открывают модальное окно, и закрывается нажимая на кнопку hide (dismiss).

Страница разработана для исключительного использования в мобильных телефонах. Следовательно, очень общо, что пользователи пробуют закрыть модальное окно с кнопкой назад / возвращаться из Ваших телефонов, и сделав это, они засолили сайта.

Я могу осуществлять (talvez с JS) код, чтобы закрывать модального с этой кнопкой, которую приносят мобильные телефоны?

Я искал информацию, но только нахожу ее для Аппс де Андроид, не для веб-страниц.

.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>
8
задан 08.04.2019, 17:34
1 ответ

DespuГ©s большого количества времени encontrГ© этот plugin: https://github.com/keaukraine/bootstrap-fs-modal очень легкомысленные и очень простые конфигурирования :

ВїQuГ© ты должен делать? Применять в манерах Bootstrap класс modal-fullscreen (свойственная plugin) и совсем не mГЎs , оставшаяся часть реализует JS.

Могут видеть с устройств mГіviles Ваше функционирование в этом demo .

, Если они не хотят использовать стили, которые приносит этот plugin, могут быть удаленными оставляя функциональным Гєnicamente JS, который я имею в 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()
    })
});
5
ответ дан 03.12.2019, 04:50

Теги

Похожие вопросы