Modal popup for iframe previews for WordPress site

I'd like to create something very similar to what you see here: [login to view URL] When you hover over any of the template thumbnails and click "preview". 1. When "preview" is clicked, a modal with a subtle transition appears with the iframe showing a particular website. 2. Links outside of the iframe wrap: You'll also notice that outside of the iframe wrap there are a few other action items, such as a link to go "back", which just closes the modal. I'd also like to have two other links like this example has at the top right of the modal (to view the template in a new window or a button that links wherever I'd like) 3. Also notice just outside of the iframe wrap are three different device layouts (desktop, tablet and mobile) - notice how the desktop is still the default even if the browser width is small, the iframe only changes to the tablet/mobile versions if that icon is clicked. My site is built with a custom Wordpress theme I've designed and developed so this must work with Wordpress. I'd prefer a very clean and lightweight solution. I'd like the modal to be able to be triggered dynamically so if I have a php loop (foreach or while), I'd like to be able to have something like: <a href="#modal-<?php echo $ID;?>" class="modal-trigger">Preview Theme A</a> <div id="modal-<?php echo $ID;?>">iframe and other stuff here</div> Let me know if you have questions. Thank you!