Question

How can i open a url link within a modal dialog like on Chrome Web Store when opening a Chrome App. Notice the background ramains in shaddow but it’s still the home page. And the URL changes in Chrome Web Store.

Answer 1

For dialog use jQuery UI

http://jqueryui.com/demos/dialog/#modal-message

For changing URL with JS use History API

http://html5demos.com/history

Also check Good tutorial for using HTML5 History API (Pushstate?)

For older browsers you may have to use location.hash, the above jQuery UI site is a good example for this.

For opening all links in a dialog you may code like below

$('a').click(function(e){
  e.preventDefault();
  var url=$(this).attr('href')+"?content_only"; //content_only added to tell index.php to give only content without template and JS
   $.get(url, function(data) {
    $('.dialog').html(data).dialog();
   //change URL here
  });
});

For pointing all URLs to homepage you have to do server side tricks, point all URLs to index.php. Like example.com/index.php/subpage and check with on Document ready if the URL is not just index.php I mean something like example.com/index.php/subpage then open example.com/index.php/subpage?content_only in a dialog. In index.php use a criterion, content_only is specified then return only the content of subpage without template and JS.