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有助于防止重定向，但网址没有变化。（使用Jquery）

如何达到预期效果？

Answer 1

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

Answer 2

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

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

Answer 3

我在这里发现了一些可以帮助你的东西Popups like coderwall or facebook (url change but no redirect)

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

$(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
    });
 });
});

Colorbox plugin

修改我只在IE上测试了它

更改位置，防止重定向

3 个答案: