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

网站 | 使用手机返回/返回按钮关闭模态窗口

  • 772

再会，

我正在设计一个基本上只在一个页面上工作的网站，所有信息都通过按下打开模式窗口的按钮显示，并通过按下按钮hide（关闭）关闭。

该页面仅供移动使用。因此，用户尝试使用手机上的后退/返回按钮关闭模式是很常见的，这样做会退出网站。

我可以用手机带来的这个按钮来实现（也许用 JS）一个代码来关闭模式吗？

我已经搜索过信息，但我只找到了 Android 应用程序，而不是网页。

.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

    很长一段时间后，我发现这个插件：https ://github.com/keaukraine/bootstrap-fs-modal非常轻巧且易于配置：

    你该怎么办？在 Bootstrap modals 中应用类modal-fullscreen（适用于插件） ，仅此而已，其余部分由 JS 完成。

    您可以在移动设备上的这个演示中看到它是如何工作的。

    如果你不想使用这个插件带来的样式，你可以删除它们，只留下我在下面分享的 JS 功能：

    $(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. 仅使用JS或jQuery无法为 Android 做到这一点。

    这是不可能的。

    您可以做的是控制导航，并在按下该按钮时执行您想要的功能，例如关闭模式窗口。

    您可以尝试这样的事情（当然，您必须使其适应您的代码，但这就是我可以在没有看到您的代码的情况下给您的）：

    <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