リンク先をiframeを使い、Lightbox風に表示させる

Result

jQuery

//クリックでイベント発火
$('.open-dialog').click(function() {
    //ダイアログを表示させてからid="iframeContainer"を探してDOM要素追加
    $('#kotak-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '"></iframe>');
    //オーバーレイ
    $('#dialog-overlay').fadeTo(400, 0.8);
    return false;
});
//閉じるイベント
$('#kotak-dialog .close').click(function() {
    //追加したiframeのDOMを削除
    $('#kotak-dialog').fadeOut('normal', function() {
        $('iframe', this).remove();
    });
    //オーバーレイを削除
    $('#dialog-overlay').hide();
    return false;
});

css

#kotak-dialog {
  position:absolute;
  top:20%;
  left:50%;
  margin:0px 0px 0px -200px;
  width:400px;
  height:auto;
  background-color:#fff;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  z-index:1000;
  display:none;
}
 
#kotak-dialog *:focus {
  outline:none;
}
 
#kotak-dialog h3.title {
  background-color:#3B5998;
  padding:10px 15px;
  color:#fff;
  font:normal 16px Arial,Sans-Serif;
  margin:0px 0px 0px 0px;
  position:relative;
}
 
#kotak-dialog h3.title a {
  position:absolute;
  top:10px;
  right:15px;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
}
 
#kotak-dialog .isi-dialog {
  margin:15px;
  font:normal 12px Arial,Sans-Serif;
}
 
#kotak-dialog .button-wrapper {
  padding:10px 15px 0px;
  border-top:1px solid #ddd;
  margin-top:15px;
}
 
#kotak-dialog .button-wrapper button {
  background-color:#FF0C39;
  border:none;
  font:bold 12px Arial,Sans-Serif;
  color:#fff;
  padding:5px 10px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  cursor:pointer;
}
 
#kotak-dialog .button-wrapper button:hover {
  background-color:#aaa;
}
 
#dialog-overlay {
  position:fixed !important;
  position:absolute;
  z-index:999;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:#000;
  display:none;
}
 
 
/* Iframe */
#iframeContainer iframe {
  width:100%;
  height:300px;
  border:none;
  background-color:#ccc;
  overflow:auto;
}

html

<div id="kotak-dialog">
<h3 class="title">Dialog<a href="#" class="close">&times;</a></h3>
    <div class="isi-dialog">
 
    <div id="iframeContainer"></div>
        <div class="button-wrapper">
            <button class="close">Close</button>
        </div>
    </div>
</div>
<div id="dialog-overlay"></div>
 
<p>
    <a href="http://jsfiddle.net/" class="open-dialog">jsfiddle</a><br>
    <a href="http://www.yahoo.co.jp/" class="open-dialog">Yahoo!</a><br>
</p>​

via

Moved Temporarily

Result

jQuery

css

html

via

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code