如果用户打开模态框并单击浏览器窗口中的后退按钮,则应保留在同一站点上。易趣就是一个很好的例子: http://www.ebay.de/itm/NIKE-FLEECE-JOGGINGHOSE-HOSE-CUFFED-SWEATHOSE-TRAININGSHOSE-FREIZEITHOSE-/380751278122?pt=LH_DefaultDomain_77&var=&hash=item58a68b702a
如果单击图像,模式将打开,如果单击浏览器的后退按钮,则会保留在同一页面上,而不是重定向到上一页。
如果用户点击浏览器中的后退按钮,用户是否在同一个窗口中,我该怎么做?
这是我的模态代码
/**
* Will be called when the detail page image slider was clicked..
* Opens the lightbox with an image slider clone in it.
*
* @event onClick
*/
onClick: function () {
var me = this,
plugin = me.$el.data('plugin_imageSlider');
$.modal.open(me.$template || (me.$template = me.createTemplate()), {
width: '50%',
height: '50%',
padding: '20px',
animationSpeed: 350,
additionalClass: 'image-gallery--modal no--border-radius',
onClose: me.onCloseModal.bind(me)
});
me._on(me.$zoomInBtn, 'click touchstart', $.proxy(me.onZoomIn, me));
me._on(me.$zoomOutBtn, 'click touchstart', $.proxy(me.onZoomOut, me));
me._on(me.$zoomResetBtn, 'click touchstart', $.proxy(me.onResetZoom, me));
picturefill();
me.$template.imageSlider({
dotNavigation: false,
swipeToSlide: true,
pinchToZoom: true,
doubleTap: true,
maxZoom: me.opts.maxZoom,
startIndex: plugin ? plugin.getIndex() : 0,
preventScrolling: true
});
me.toggleButtons(me.getImageSlider());
},
/**
* Will be called when the modal box was closed.
* Destroys the imageSlider plugin instance of the lightbox template.
*
* @event onCloseModal
*/
onCloseModal: function () {
var me = this,
plugin = me.getImageSlider();
if (!plugin) {
return;
}
plugin.destroy();
},
现在,如果用户点击浏览器后退按钮,模式应该关闭,但用户应该留在相同的网站上。
答案 0 :(得分:0)
你想要什么有点复杂 只做Jquery,annyhow:
您需要捕获窗口postate事件,停止事件传播并关闭窗口。
之后,所有事情都将按预期执行,前后。
var openedPopup = {
opened = true,
triigeredInLocation = "",
ClonedObject = ""
}
openedPopup = undefined;
$(window).on("popstate", function (e) {
if (e.originalEvent.state !== null) {
if (openedPopup != undefined)
{
//Popup opened or closed on the page by back/forward
if (openedPopup.triigeredInLocation.IndexOf(window.location.href) && openedPopup.triigeredInLocation.length == window.location.href.length)
{
if (openedPopup.opened)
{
//whatever global method for closing your modal/all modals you are using
//don't know how to close your popup, this may be a stupid example
openedPopup.colonedSelector.CloseModal();
//stop event propagation
return false;
}
}
}
}
}
在您发布的代码中执行初始化/销毁模态打开的状态对象:
onClick: function () {
///...
openedPopup = {
opened = true,
triigeredInLocation = window.location.href,
ClonedObject = this;
}
///$.modal.open(...
}
//...
onCloseModal: function () {
//...
openedPopup = undefined;
//...
}
你甚至可以打开弹出窗口,如果按下了前进,但足够了,希望你理解我试图解释的内容,我的代码不是完全正常的,但你可以根据你的需要调整它。