打开模式，然后更改URL而无需重定向

Question

我正在尝试打开模式并更改网址，但保留在同一页面上。因此，它应该只打开模式更改网址，然后在弹出窗口关闭时将删除已添加的网址。

我有一个脚本，它可以在单击时更改URL，但是如果在单击时进行设置，它会更改URL，但模式不会打开。因此，我确定需要通过某种方式检测模态是否打开/关闭来完成。

我的jQuery代码：

 $(".modal").click(function() { 
   window.history.pushState("obj", "newtitle", "/newurl");
   return false;
 });

第二次尝试：

if ($(".feedModal").hasClass("show")) {
    window.history.pushState("obj", "newtitle", "/abc");
    return false;
});

我将自举程序用于模态，我看到我可以使用bs.modal.shown检测到模态开口，但对我而言不起作用。我也尝试过shown仍然没有帮助。

任何帮助都将非常重要。谢谢！

Answer 1

您的代码建议您单击$(".feedModal")元素以打开或关闭模态。如果不是这种情况，则可以轻松修改。不过，这将对您有所帮助。

检查触发器上的click事件，是否已经通过伪选择器 :visible看到了模态。如果隐藏，则使用.modal('hide')的Bootstrap Modal方法将其隐藏。这将隐藏它并触发一个事件，稍后我们将使用它。如果看不到，请显示.modal('show')。

var $modal = $(".feedModal");
var $modal.on('click', function(event) {
    if ($modal.is(':visible')) {
        $modal.modal("hide");
    } else {
        $modal.modal("show");
    }
});

如果使用show.bs.modal和hide.bs.modal事件处理程序打开或关闭模式，我们可以侦听该模式。通过侦听模式打开时的声音，我们将历史记录更改为新值。通过监听模式关闭时的状态，我们可以将其更改回之前的状态。

// On show.
$(".feedModal").on('show.bs.modal', function(event) {
    window.history.pushState("obj", "newtitle", "/abc");
});

// On hide.
$(".feedModal").on('hide.bs.modal', function(event) {
    window.history.back();
});

Answer 2

window.history.pushState("obj", "newtitle", "#abc");