2

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.

Muhammad Usman
  • 12,439
  • 6
  • 36
  • 59
Tudor Ravoiu
  • 2,130
  • 8
  • 35
  • 56

1 Answers1

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.

Community
  • 1
  • 1
Muhammad Usman
  • 12,439
  • 6
  • 36
  • 59
  • thank you for the quick answer. but your sugested method does not work entierly becouse when you enter www.demopage.com/example.php in the URL address bar it will open only example.php, without the homepage in the background. – Tudor Ravoiu Dec 26 '11 at 12:15
  • This thing is a bit tricky and detailed, anyway I have updated the answer. – Muhammad Usman Dec 26 '11 at 13:46