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

时间:2015-03-31 11:50:38

标签: javascript jquery

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

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

1 个答案:

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

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