打开并关闭带有背面和前向按钮的Bootstrap 3模式-DEV365 开发者社区

如果您在这里，您的客户或您的需求很可能需要您打开和关闭浏览器' back ＆ forward button。

在本文中，我将向您展示一个技巧，而无需使用历史记录api 。

。

步骤1：添加模态标记

第一步是将模态标记添加到您的HTML文件中。这是标记可能是什么样子的示例：

<div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="video-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="video-modal-label">Modal Title</h4>
            </div>
            <div class="modal-body">
                <p>Modal Content</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

为了解释，模态的id将是#video-modal。

步骤2：将哈希设置在模态显示器上并隐藏

接下来，我们需要在显示或隐藏模式时更新URL哈希。我们可以通过将事件听众添加到模式的show.bs.modal和hide.bs.modal事件中来做到这一点。

您可以将其添加到JavaScript文件中。

$('#video-modal').on('show.bs.modal', function(event) {
    window.location.hash = "video-modal";
});
$('#video-modal').on('hide.bs.modal', function(event) {
    window.location.hash = "";
});

显示模式时，此代码将URL设置为“视频模式”，并在隐藏模态时将其删除。

步骤3：处理哈希更改

现在，当显示模式或隐藏模态时，我们需要处理对URL中的哈希的更改。我们可以通过在窗口的hashchange event中添加事件侦听器来做到这一点。

这是更新的JavaScript代码：

$(window).on('hashchange', function (event) {
    var $videoModal = $('#video-modal');

    if ($videoModal.length > 0) {
        if(window.location.hash === "#video-modal") {
            $('#video-modal').modal('show');
        } else {
            $('#video-modal').modal('hide');
        }
    }
});

此代码检查URL哈希是否等于video-modal。如果是这样，它显示了模态。如果不是，它隐藏了模态。

步骤4：测试

现在我们添加了必要的代码，我们可以测试模态，看看它是否按预期打开和关闭。当您单击打开模式的链接或按钮时，您应该看到更改URL以包含“＃video-modal”。关闭模式时，URL应返回其原始状态。

结论

在本文中，我们向您展示了如何在不使用历史记录API的情况下打开和关闭Bootstrap 3模式。通过在显示或隐藏模态时设置URL哈希，我们可以在浏览器的历史记录中跟踪模态状态。这允许用户使用浏览器的返回按钮导航返回上一页或模态状态。