I have built a simple modal using jQuery which takes a url and then loads it using the ajax method and inserts the response html into a div I display on the screen in the design of a modal box. Simple stuff!

However these pages are actual urls e.g. `domain.com/posts/add` and can be accessed directly via the browser and not just clicking a link within the app. I would prefer that they be displayed in modal at all times even if the user types the url into the address bar. Currently I make it so that if the request IS NOT Ajax then redirect them to the homepage or show a 404 to prevent this from happening.

I would prefer to load these pages in the modal should the user access them directly via HTTP in the same way that the Chrome store does this e.g. <https://chrome.google.com/webstore/detail/pjkljhegncpnkpknbcohdijeoejaedia>

How would I do this though? Without having to do some really messy javascript? Any ideas or suggestions would be appreciated. Please note that this should work like a proper app in that it allows the user to use the back and forth buttons and the modal should appear and disappear 

As for the modal code I use...

It is really simple and this is an example of how it looks (note mine is more robust than this, code purely for example of simplicity)

```
$('.ajax-link').click(function(e){

e.preventDefault;

$.ajax({

url: $(this).attr('href'),
success: function(response) {
$('<div id="modal">' + response + '</div>').appendTo('body');
}
});

```

});