Tạo lightbox iframe với fancybox

Tạo lightbox iframe với fancybox.

Fancybox nhẹ nhàng và là một thư viện tuyệt vời.
Bài viết này sẽ hướng dẫn bạn cách lightbox một iframe.

Đầu tiên mọi người xem qua DEMO

DEMO

Các bước thực hiện để lightbox một iframe.

Bước 1: 

Đầu tiên thêm vào trước </head> script với CSS sau :

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>  <script type="text/javascript" src="http://myjectpro1.googlecode.com/files/jquery.fancybox.js"></script>
<style type="text/css">
/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-skin{width:660px !important; overflow:hidden;}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
color: #444;
text-shadow: none;
-webkit-border-radius: 0px;
  -moz-border-radius: 0px;
       border-radius: 0px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.4);
       box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.4);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: none;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 660px;
height: 100%;
scroll:no;
overflow: hidden;
}
.fancybox-image {
max-width: 640px;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
.fancybox-close{
background:url("http://www.tfl.gov.uk/tfl/gettingaround/maps/buses/tfl-bus-map/img/icons/CloseButton.png") no-repeat;
z-index:9999999;
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -120px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
background:url("http://goo.gl/FYHC2") no-repeat;
}
#fancybox-loading div {
width: 104px;
height: 88px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: 0px;
right: -19px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: black;
opacity:0.7;
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
  -moz-border-radius: 15px;
       border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
a#btn1 {
position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(219,87,5,1);
    font-family: 'Yanone Kaffeesatz';
    font-weight: 700;
    font-size: 14px;
    display: block;
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 5px 0px rgba(219,31,5,1), 0px 5px 5px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 5px 0px rgba(219,31,5,1), 0px 9px 5px rgba(0,0,0,.7);
    box-shadow: 0px 5px 0px rgba(219,31,5,1), 0px 9px 5px rgba(0,0,0,.7);
    margin: 20px 20px auto;
width: 100px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
a#btn1:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
}
</style>

 Bước 2: Trong body bạn thêm mã sau :

<a id="btn1" class="fancybox fancybox.iframe" href="http://onthi.erhay.com/p/math-editor-public.html">Mở bộ gõ</a>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a.fancybox').fancybox();
    });
</script>

Phần link in đậm là link bạn muốn hiển thị :