Geek asks and answers

Using history.js with dynamic (ajax) modal blocks

I have a modal box (Twitter Bootstrap) that I try to control during various actions:

  • The user clicks the link> shows the modal code window, changes (pushstate).
  • User hides modal block> Changes the URL to the previous page.
  • The user presses the "Back" button> hides the modal block, changes the URL on the previous page.
  • The user presses the redirect button> shows the modality window, the pushstate URL changes.

My main problem is related to points No. 3 and No. 4. The module needs to switch when the browser buttons are used in reverse / transition mode (the URL changes)

Here is my current code that only works with actions # 1 and # 2:

$(function(){
$(".thumbnail a").live("click", function(){
    msgurl = $(this).attr("href");
    msgid = $(this).attr("data-id");
    history.pushState(null, null, msgurl);

    $.ajax({
        ....
    });
    $("#newmodal").modal({ dynamic: true });
     return false;
});
$('#newmodal').bind('hidden', function () {
    history.back();
})
});

/ , history.js? ?

+3
1

- ...

(1-4), , HTML4 ( history.js http://domain.org/page/page#-http://domain.org/modalpage, ).

, :

onpopstate. , :

window.onpopstate = function(e) {
var State = e.state;
if (!State) { //i.e., we've gone to the history context (no active state)
    $('#modal').modal('hide');
}
else {//Re-open state modal
    var modalURL = State.URL.substring(State.URL.indexOf('?show=')+6);
    openModal(appRoot+modalURL, State);
}
}

onpopstate , (, , ), URL-. URL- '? Show = relativeModalLink/', , . , , URL-, , ( ).

, , , , , , . , .

, - :

function openModal(modalLink, state) {    
if (state === undefined) {
       var shortLink = modalLink.substring(modalLink.indexOf(appRoot)+appRoot.length);
       var stateLink = document.location.href.indexOf('?show=') === -1 ? document.location.href+'?show='+shortLink : document.location.href;
       history.pushState({'type': 'modal','URL':stateLink},'',stateLink);
    }
}

, , , "" .

, .

getcha: window.history.back() ( "" ). , , , ( onpopstate .modal('hide')). , "", "" (, , ...).

history.js, script . HTML5, , , HTML4 ( URL, ). history.js , "ajaxifying" .

, !

+6

More articles:


All Articles