Handling Back Button For Modal With An Iframe

handleBackbutton.js

//out side page

var clearModalState = function(){
    if (window.history && window.history.pushState) {
        //Grab our current Url
        var url = window.location.toString();
        //Remove anchor from url using the split
        if( url.indexOf('#') != -1 )
            window.history.replaceState({}, document.title, url.split("#")[0]);
    }
}

var pushModalState =  function(){
    if (window.history && window.history.pushState) {
        window.history.pushState('forward', null, '#modal');
    } 
}

var registerBackButtonHandler = function(){
    if (window.history && window.history.pushState) {
        $(window).on('popstate', function () {
            var skipClose;
            frn.closeRecordModal(skipClose=false);
        });
    }
}


// Initialize dialog
$(function(event){

    frn.dialog = $( "#dialog-form" ).dialog({
        autoOpen: false,
        modal: true,
        autoOpen: false,
        buttons: {
            // Cancel: function() {
            //     frn.closeRecordModal();
            // }
        },
        beforeClose: function( event, ui ) {
            //var skipClose;
            frn.closeRecordModal(skipClose=true);
            clearModalState();
        },
        open: function( event, ui ) {
            //to handle back button click
            pushModalState();                    
        }
    });

    registerBackButtonHandler();
});

//Inside the modal page
// Handle back button click
if (window.history && window.history.pushState) {
  window.history.pushState('forward', null, '#modal');
    $(window).on('popstate', function () {
        frn.closeParentModal();
    });
}