模态-浏览器后退按钮保持在同一站点上

Question

如果用户打开模式框并单击浏览器窗口中的“后退”按钮，则他应留在同一站点上。 eBay是一个很好的例子： http ://www.ebay.de/itm/NIKE-FLEECE-JOGGINGHOSE-HOSE-CUFFED-SWEATHOSE-TRAININGSHOSE-FREIZEITHOSE-/380751278122?pt=LH_DefaultDomain_77&var=&hash= item58a68b702a

如果单击图像，则会打开模式窗口，如果单击浏览器的后退按钮，则您将停留在同一页面上，而不是重定向到上一页。

如果用户单击浏览器中的“后退”按钮，我该如何使用jQuery来使用户停留在同一窗口中？

这是我的模态代码

    /**
     * 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();
    },

现在，如果用户单击浏览器后退按钮，则应该关闭模式，但用户应留在SAME站点上。

Answer 1

您只想对Jquery使用annyhow要做的事情有点复杂：

您需要捕获窗口发布事件，停止事件传播，然后关闭窗口。

在那之后，一切都会向前和向后执行。

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;
//...
}

您甚至可以打开弹出窗口，如果按下了前进键，那么就足够了，希望您理解我试图解释的内容，我的代码虽然不能完全正常工作，但是可以根据需要进行调整。