Opening the page in a modal keeps the coherency of the application intact and provides a good look and feel, but there are times when users will want to open several of the modals at once and be able to reference them all without needing to close one before opening the next. Opening to a new window or tab makes more sense at these times.
To accomplish this I setup a standard HTML link so the users can right click and open the link in a new tab or window, but I also used JQuery to highjack the regular click action to open the link in a modal on the existing page.
Lets look at how to get this working:
1. Here's the full html for the demo page, you'll notice I'm using JQuery, and the JQuery UI package for the modal...
2. You will need the following css setup so the modal isn't visible right away, and to set the modal size. I also get rid of the ugly border around the iframe.
3. Here's the jquery magic to highjack the link and make it open in a modal for a standard left click. We'll attach this event handler to all links with the modal-link class, and the modal will open the url from the links href attribute.
