我通过ajax将内容加载到div中。这会将网站哈希值更改为#WhateverYouClickedOn,这很好。一旦用户单击关闭此模式窗口的x按钮,我想清理哈希。 我怎么能这样做?
这是我的代码
调用Ajax
function getPage() {
return window.location.hash.replace(/^#/, '');
}
function updatePage(page, html) {
var navItems = [
'products',
'about',
'storelocator',
'media',
'faq',
'contact'
];
$('.overlay').trigger('show');
// Remove the arrow from the previously selected item
if (navItems.indexOf(page) != -1) {
$(".w-container .w-nav-menu a").removeClass("active");
}
$("#" + page + "-link").addClass("active");
$('.content')
.hide()
.html(html)
.fadeIn();
}
function retrieveContent() {
$('.overlay').trigger('show');
var page = getPage();
if (!page) {
return;
}
$.ajax({
type: "POST",
url: "./load.php",
data: 'page='+page,
dataType: "html",
beforeSend: function() {
$('#canvasloader-container.wrapper').show();
},
complete: function() {
$('#canvasloader-container.wrapper').hide();
},
success: function(msg){
if (msg) {
updatePage(page, msg);
}
}
});
}
$(function() {
retrieveContent();
window.onhashchange = retrieveContent;
});
叠加/模态窗口
(function($) {
$.fn.overlay = function() {
overlay = $('.overlay');
overlay.ready(function() {
overlay.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
if (!$(this).hasClass('shown')) return $(this).css('visibility', 'hidden');
});
overlay.on('show', function() {
$(this).css('visibility', 'visible');
$(this).addClass('shown');
return true;
});
overlay.on('hide', function() {
$(this).removeClass('shown');
$(".content").html("")
return true;
});
overlay.on('hide', function() {
$(".w-container .w-nav-menu a").removeClass('active'); // Remove the active class when overlay is off
$(".content").html("")
return true;
});
$('a[data-overlay-trigger=""]').on('click', function() {
overlay.trigger('show');
});
$('a[data-overlay-trigger]:not([data-overlay-trigger=""])').on('click', function() {
$('.overlay.' + $(this).attr('data-overlay-trigger')).trigger('show');
});
})
};
})(jQuery);