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">×</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
http://hompimpaalaihumgambreng.blogspot.jp/2012/03/memasukkan-video-ke-dalam-komentar.html
