OS X Lookup Style iFrame Popup Plugin with jQuery - Quicklook

Quicklook is a tiny jQuery plugin helps you display an animated iframe popup next to the toggle link similar to the Mac OS X lookup.

How to use it:

1. Download the quicklook plugin and include the quicklook.jquery.js after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="quicklook.jquery.js"></script>

2. Create a link to toggle an iframe popup.

<a href="EXTERNAL URL">Click me!</a>

3. Call the function on the a tag to enable the plugin.

$('a').quicklook();

4. Style the iframe popup in the CSS.

#quicklook_container {
  -webkit-transition: height 0.6s ease-in-out, width 0.6s ease-in-out;
  -moz-transition: height 0.6s ease-in-out, width 0.6s ease-in-out;
  transition: height 0.6s ease-in-out, width 0.6s ease-in-out;
  z-index: 10;
  position: absolute;
  overflow: hidden;
}

#quicklook_container iframe {
  border: none;
  zoom: 0;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  transform-origin: left bottom;
  position: absolute;
  top: 0px;
}

#quicklook_container .close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bold;
  z-index: 2;
  color:#fff;
  size:2em;
  cursor:pointer;
}

5. Plugin options available.

// click or hover
action: 'click',

// auto resize the popup
autofit: true,

// height / width of the popup
height: 500,
width: 500,

// background color
bg_color: '#ccc'

---

This awesome jQuery plugin is developed by ryanshawty. For more Advanced Usages, please check the demo page or visit the official website.