Question

如果用户打开模态框并单击浏览器窗口中的后退按钮，则应保留在同一站点上。易趣就是一个很好的例子： 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();
    },

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

Answer 1

你想要什么有点复杂只做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;
//...
}

你甚至可以打开弹出窗口，如果按下了前进，但足够了，希望你理解我试图解释的内容，我的代码不是完全正常的，但你可以根据你的需要调整它。

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

1 个答案: