jquery - 更改位置，防止重定向

Question

当您单击链接时，我会打开一个弹出窗口。我希望它在弹出窗口打开时表现得像 Facebook 图像或 Pinterest 弹出窗口，并且 URL 会更改但没有重定向。

我的代码是这样的：

<a href="/movies.jsp?id=123123" class="item-img">
    <img src="/images/123123.jpg" />
</a>

<script>
$(document).on('click', '.item-img', function(e) {
    e.preventDefault();
    //code for popup
});
</script>

preventDefault有助于防止重定向，但 url 不会改变。（使用jQuery）

我如何达到预期的效果？

Answer 1

我在这里找到了一些可以帮助您的弹出窗口，例如 coderwall 或 facebook（网址更改但没有重定向）

我认为就是将一个条目推入历史堆栈并显示弹出窗口

$(document).ready(function() {
   $("a[rel=popup_link]").on("click", function(e){
    e.preventDefault();
    var url = $(e.target).attr("href");
    //to get the ajax content and display in div with id 'content'

    if(url != window.location){
        window.history.pushState({path:url},'',url) ;
    }
    $.colorbox({
      inline: true,
      href: "<your content>",
      open: true
    });
 });
});

彩盒插件

编辑： 我只在 IE 上测试过

Answer 2

当您更改网址时...您将获得重定向。除非您正在实现使用散列来更改 url（不会导致重定向）的单页应用程序 (SPA)。

Answer 3

可能你想打开一个 javascript 弹出窗口：

$(document).on('click', '.item-img', function(e) {
    e.preventDefault();
    window.open(this.href, "self", 'width=200, height=300');
});