Baiklah setelah seharian pusing berkoding akhirnya kelar juga memperbaiki masalah javascript pada posting Iframe preloader Sebelumnya, aku juga kok baru kepikiran kalau menggunakan ID pasti cuman bisa 1 link saja yang bekerja, sebelumnya terima kasih untuk masukan komentarnya teman-teman. baiklah kali ini hanya saya update saja kodenya menjadi lebih praktis jadi kita hanya perlu menambahkan class saja pada linknya maka otomatis linknya akan terbuka pada iframe.
<script type="text/javascript">
//<![CDATA[
// ZTO CREATION
// http://zhinto.blogspot.com/
function tampil(obj){
var p = document.getElementById('bungkus'), //bungkus iframe
b = document.getElementById('iframe'); //Iframe
p.className = 'tampil';
b.className = 'lanjut';
b.src = obj.href;
}
function sembunyi(){
var p = document.getElementById('bungkus'), //bungkus iframe
b = document.getElementById('iframe'); //Iframe
b.className = 'awal';
b.src = '';
p.className = 'hidden';
}
window.onload = function(){
var p = document.getElementsByClassName('k');
for(var i = 0; i < p.length; i++){
p[i].onclick = function(){
tampil(this);
return false;
}
}
}
//]]>
</script>Simpan javascriptnya diatas
</body> atau </head><div id='bungkus' class='hidden'> <div class='hilang' onclick='sembunyi();'>«</div> <iframe id="iframe" class="awal"></iframe> </div>
Simpan kode HTML dibawah
<body>#bungkus {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
z-index: 99999
}
#bungkus iframe {
border: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%
}
#bungkus .hilang {
cursor: pointer;
background: #252424;
color: #E00;
width: 15px;
position: absolute;
height: 100%;
text-indent: 1px;
z-index: 999;
font: normal 19px/500px Arial, sans-serif
}
/* CSS Transfer */
.tampil {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.hidden {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.awal {
display: none
}
.lanjut {
display: block
}
/* Batas Css Transfer */
Simpan kode cssnya diatas
]]></b:skin><a class='k' href="http://zhinto.blogspot.com/">Cek</a>Jadi ketika kita ingin menambah link yang terbuka pada iframe kita tinggal tambahkan saja
class='k' beres deh.
