Modal - Browser back button stay on the same site

Question

if a user opens a modal box and clicks the back button in the browser window he should stay on the same site. eBay is a good example: http://www.ebay.de/itm/NIKE-FLEECE-JOGGINGHOSE-HOSE-CUFFED-SWEATHOSE-TRAININGSHOSE-FREIZEITHOSE-/380751278122?pt=LH_DefaultDomain_77&var=&hash=item58a68b702a

If you click on the image the modal opens and if you click the back button of your browser you stay on the same page instead of redirecting to the previous page.

How can i do this with jQuery that the user stays in the same window if he clicks the back button in his browser ?

This is my modal code

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

Now if the user clicks the browser back button the modal should close but the user should stay on the SAME site.

you mean something like this [topic](http://stackoverflow.com/questions/16870007/how-to-close-a-bootstrap-modal-with-the-browser-back-button-instead-of-going-bac)? — xtof, Mar 31 '15 at 12:11
I dont want to disable the back button i want that the modal closes if you click the browsers back button and you stay on the same site. If the modal closed you can use the back button. — user3633186, Mar 31 '15 at 12:20
Then _add_ an entry to the history when the modal is opened … (f.e. by changing the hash part of the URL, or using the HTML5 History API.) — CBroe, Mar 31 '15 at 12:36
I tried it with var closemodal = this, plugin = me.getImageSlider(); if (!plugin) { return; } plugin.destroy(); history.pushState(closemodal); But it does not work. I get redirected. — user3633186, Mar 31 '15 at 12:55

score 0 · Answer 1 · answered Mar 31 '15 at 14:12

It's a bit complicated what are you want to do only with Jquery, annyhow:

You need to catch window postate event, stop event propagation, and close your window.

After that everything will perform as expected with back and forward.

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

in your posted code do initialization/destruction of modal opened state object:

 onClick: function () {
///...

openedPopup = {
        opened = true,
        triigeredInLocation = window.location.href,
        ClonedObject = this;
}
///$.modal.open(...
}

//...

 onCloseModal: function () {
//...
openedPopup = undefined;
//...
}

You can even open back the popup, if forward is pressed, but enough with this, hope you understand what I tried to explain, my code isn't fully functional but you can adapt it to you needs.

Modal - Browser back button stay on the same site

1 Answers1