Хороший день,
Я разрабатываю веб сайт, который функционирует главным образом на 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>
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()
})
});