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

【问题标题】：Modal - Browser back button stay on the same site模态 - 浏览器后退按钮保持在同一站点上
【发布时间】：2015-03-31 11:50:37
【问题描述】：

如果用户打开一个模态框并单击浏览器窗口中的后退按钮，他应该留在同一个站点上。 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();
    },

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

【问题讨论】：

你的意思是这样的topic？
我不想禁用后退按钮，如果您单击浏览器的后退按钮并且您停留在同一个站点上，我希望模式关闭。如果模态关闭，您可以使用后退按钮。
然后在打开模式时添加一个条目到历史记录中……（通过更改 URL 的哈希部分，或使用 HTML5 History API。）
我试过 var closemodal = this, plugin = me.getImageSlider();如果（！插件）{返回； } plugin.destroy(); history.pushState(closemodal);但它不起作用。我被重定向了。

标签： javascript jquery

【解决方案1】：

你想要什么有点复杂仅与 Jquery 一起做，无论如何：

您需要捕获窗口 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;
//...
}

如果按下了前进，您甚至可以打开弹出窗口，但这样就足够了，希望您能理解我试图解释的内容，我的代码功能不完整，但您可以根据需要对其进行调整。

【讨论】：