Jquery 如何打开一个模式框，其中包含来自另一个页面的内容，URL在单击时会发生更改？

如何打开一个模式框，其中包含来自另一个页面的内容，其中URL 点击后的变化（就像Twitter.com一样）

请查看Twitter.com的功能

我有一个简单的例子，它完全按照我想要的方式工作，只是URL在调用模式框时不会改变

我有两个文件“Call.html”和“Test.html”

以下是文件的内容：

Call.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>


<a href="Test.html" data-toggle="modal" data-target="#Modal">Test</a>


<div id="Modal" class="modal fade text-center">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

假设我的网站名为：www.mysite.com

当我去：

www.mysite.com/Call.html

然后点击超链接

此时会出现模式框，其中包含Test.html的内容

但是，URL保持不变（即www.mysite.com/Call.html）

我希望URL更改为：

www.mysite.com/Test.html

当点击超链接时（就像Twitter.com那样）

（有人知道怎么做吗？）

然后，在模式框打开的情况下，关闭模式框时 框中，我希望将URL更改回 www.mysite.com/Call.html（就像Twitter.com一样）

有人知道怎么做吗

提前谢谢

您可以使用它，甚至在选择指向其他页面的链接时使其更具动态性：

$（文档）.ready（函数（）
{
//将此添加到call.html页面
$（“.link”）。单击（函数（）
{
//如果需要动态链接，可以使用元素上的属性来设置url
var hash=$（this.attr（“数据url”）；
console.log（“page=“+hash”）；
//将url上的哈希设置为任意值
window.location.hash=散列；
//停止DOM中冒泡的事件
event.preventDefault（）；
var page=$（this.attr（'href'）；
console.log（“page=“+page”）；
//向服务器发送请求以检索.html页面
$.ajax(
{
方法：“获取”，
//这应该随着文件的位置而更新
网址：第页，
//如果服务器请求获取页面成功
成功：功能（结果）
{
$（“.modal content”）.load（结果）
},
//否则，请注意，此示例将失败，因为此位置不存在test.html
错误：函数（结果）
{
$（“.modal content”）.html（“未能获得响应请稍后重试”
”；
}
});
});
});
//将url还原回上一个url
函数revertToOriginalURL（）
{
var original=window.location.href.substr（0，window.location.href.indexOf（“#”）；
history.replaceState（{}，document.title，原件）；
}
//当modal关闭时，将url恢复到以前的状态
$（'.modal'）.on（'hidden.bs.modal'，function（）{
revertToOriginalURL（）；
});
。错误
{
边框：2个点红色；
保证金：5px；
}
A.
{
字体大小：20px；
}



你好，Yoda大师，谢谢您的答复。我很感激。我尝试了你发布的两个版本，URL保持不变。我想知道我是否清楚地解释了我的问题。单击链接，然后在浏览器的URL框中单击时，URL框中的位置保持不变。但在Twitter.com上，当点击链接时，我浏览器URL框中的位置从“Twitter.com”变为“Twitter.com/User_ID/status/910982522”。当关闭模式时，URL框中的位置从“twitter.com/User_ID/status/910982522”变回“twitter.com”。嘿，你指的是twitter的哪一部分？你能提供一个我可以导航到的例子吗？@Joe尝试一下我的更新。不确定它是否能在这个域上运行，但请自己尝试。嗨，尤达大师-感谢您的回复！如果你去让我们说LeBron James Twitter饲料：Twitter。com /金詹姆斯他的第一篇文章有一张照片，…点击图片外部阅读帖子，当你这样做时，broswer的URL框中的位置从twitter.com/KingJames变为，然后在关闭模式时，浏览器的URL框中的位置变回twitter.com/KingJamesThanks，感谢你的帮助Yoda大师-我很感激！
Some Text ...