我想创建这样的东西：
<a href="post/23">post 23</a>
用户单击此元素后我想淡入一个弹出的div 并将页面帖子/23 html 加载到它。我想将标题和地址栏更改为新的帖子页面标题和地址栏。关闭弹出窗口div后，我希望标题和地址不好改回来。
很抱歉，我没有任何代码给你们，我正在寻找这个很长一段时间，但找不到任何确定的东西。
我最好的猜测是使用http://dimsemenov.com/plugins/magnific-popup/documentation.html
有类似经验的人可以帮助我吗？
1.包括 jQueryUI 对话框 JS ：
http://jqueryui.com/dialog/
阿拉伯数字。将类、数据标题属性附加到链接选项。.HTML：
<a class="alink" href="post/23" data-title="post23" >post 23</a>
<a class="alink" href="post/24" data-title="post24" >post 24</a>
3.Javascript：
$(".alink").click(function () {
var dialog = $('<div title="' + $(this).attr('data-title') + '"></div>').dialog({
autoOpen: false,
hide: 'fade',
show: 'fade',
open: function (event, ui) {
$.ajax({
url: $(this).attr('href'),
cache: false,
success: function (html) {
$(dialog).html(html);
},
error: function () {
$(dialog).remove();
alert("Some Error MSG");
}
});
},
close: function () {
$(dialog).remove();
},
resizable: false,
width: 500,
modal: true
});
});
现在，每次单击链接时，都会打开一个带有淡入淡出效果的弹出窗口，对话框的标题将来自您的数据标题属性，对话框将从您的帖子中获取html。
您可以尝试以下操作：-
在第一个 html 页面中，您将有一个链接/按钮来打开弹出窗口，因此首先我们无法打开带有 bootstrap 属性的弹出窗口，因为在这种情况下无法捕获何时打开或关闭模态的事件。因此，我们将添加一个点击事件。在模态中，我们将有一个 iframe 来打开一个单独的页面。所以页面将是：-
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h2>Bootstrap 3.1.0 - Modal Demo</h2>
<div class="row text-center">
<h3>The Basic Modal</h3>
</div>
<hr>
</div>
<a class="btn btn-lg btn-success" data-btn-name="basic_modal" data-src="demo.html">Click to open Modal</a>
<div class="modal fade" id="basicModal">
<div class="modal-dialog">
<div class="modal-content">
<iframe id="frame" src=""></iframe>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="test.js"></script>
</body>
</html>
现在我们将有另一个 html 文件，该文件将在弹出窗口中打开，我们将在加载 iframe 时向父窗口触发一个事件，以便我们可以获取 iframe 的标题。
<html>
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function onLoad(){
var event = new parent.CustomEvent('print:page:loaded', {detail : window});
parent.dispatchEvent(event);
}
</script>
</head>
<body onload="onLoad()">
<div>TODO write content</div>
</body>
</html>
现在在 javascript 中，我们将侦听 iframe 触发的事件，并根据它更改窗口标题。
$(document).ready(function(){
var originalTitle,originalUrl;
$('[data-btn-name="basic_modal"]').click(function(evt){
if($('#basicModal').hasClass('in')){
window.document.title = originalTitle;
window.history.pushState('test', originalTitle, originalUrl);
}else{
$('#frame').attr('src',$(evt.currentTarget).attr('data-src'));
window.removeEventListener('print:page:loaded',function(){},false);
window.addEventListener('print:page:loaded', function(e){
originalTitle = window.document.title;
originalUrl = window.location.href;
window.document.title = e.detail.document.title;
window.history.pushState('test', e.detail.document.title, $(evt.currentTarget).attr('data-src'));
})
}
$('#basicModal').toggleClass('in');
});
})
谢谢大家，我想到了如何使用历史自己做到这一点.js我是这样做的：
var urlPath;
$('.post-image').on('click',function(){
urlPath = $(this).attr('href');
History.pushState({ action: 'show_popup' } , 'POST TITLE', urlPath);
return false;
});
History.Adapter.bind(window,'statechange',function() {
var State = History.getState();
if(State.data.action == "show_popup"){
//show dimmer
$("#lightbox").load(urlPath, function() {
//show content
});
}else{
// hide popup
}
});
$(document).on('click', function(event) {
// hiding popup if dimmer is clicked
if ((!$(event.target).closest('.post-info').length && !$(event.target).closest('.post-user').length)) {
History.back();
}
});`