Kemungkinannya adalah, Anda mungkin pasti telah melihat di suatu tempat atau yang lain. Script ini umumnya digunakan untuk menampilkan beberapa konten di jenis seperti kotak dialog (moda angkutan satu, bagi anda yang tidak Geeks) sedangkan sisanya dari konten akan menghitam. Tampak hebat? Ya ,
Oke, bagi anda masih di sini saya ingin mengakui bahwa saya tidak menaruh cukup waktu mengetahui bagaimana script tersebut benar-benar bekerja. Saya baru saja mendapat pengetahuan dari blog asing . Ini bukan untuk mengatakan bahwa saya sendiri telah menemukan beberapa cara baru, hanya saja saya tidak tahu bagaimana mereka bekerja skrip tapi aku tahu satu cara yang memberikan hasil yang sama.
Seperti yang Anda lihat dari gambar di atas, tidak ada banyak untuk Lightbox clone sederhana, kami memiliki (1) efek Blackening (2) Kotak konten.
Oke, bagi anda masih di sini saya ingin mengakui bahwa saya tidak menaruh cukup waktu mengetahui bagaimana script tersebut benar-benar bekerja. Saya baru saja mendapat pengetahuan dari blog asing . Ini bukan untuk mengatakan bahwa saya sendiri telah menemukan beberapa cara baru, hanya saja saya tidak tahu bagaimana mereka bekerja skrip tapi aku tahu satu cara yang memberikan hasil yang sama.
Seperti yang Anda lihat dari gambar di atas, tidak ada banyak untuk Lightbox clone sederhana, kami memiliki (1) efek Blackening (2) Kotak konten.
1. Efek Menghitam : Untuk ini saya akan membuat "div" elemen dengan cepat dan mengatur properti sedemikian rupa sehingga memiliki warna hitam dan beberapa transparansi, z-indeks besar berarti mengapung di atas sisa isi dan konten kembali (dengan yang normal z-index) tidak dapat berinteraksi dengan lagi. Kami akan mengisi layar saat ini dengan ini "div" yang akan mengharuskan kita untuk menempatkan elemen ini di paling atas dan paling kiri koordinat relatif terhadap daerah dapat dilihat saat ini. Ini akan menjadi (0, 0) saat halaman tidak sam sekali.
Kami juga harus ukuran elemen yang memilikinya span seluruh wilayah dapat dilihat dari browser.
Kedua hal akan memastikan bahwa tidak peduli di mana kami telah menggulir di halaman dan apa pun menjadi ukuran jendela, elemen overlay hitam selalu mencakup viewport saat ini.
2. Isi Box: Sebuah kotak baik gaya dengan tombol dekat adalah semua yang kita butuhkan. Kita akan menempatkannya di tengah layar. Karena kita telah menghitung paling atas dan paling kiri koordinat relatif terhadap viewport saat ini dan kami juga memiliki dimensi viewport saat ini, kita dapat dengan mudah posisi ini di pusat, tidak punya otak! Kami akan memberikan ini z-index lebih besar dari hitam elemen overlay tersebut bahwa ini adalah di atas segalanya.
Selain itu, kami juga harus berhati-hati bahwa kedua elemen ini bergerak bersama dengan halaman dalam kasus pengguna mencoba untuk menggulir halaman ketika lightbox kami terbuka. Ini akan memastikan bahwa (1) elemen overlay hitam selalu mengisi kotak isi layar (2) selalu di pusat.
Kami juga harus ukuran elemen yang memilikinya span seluruh wilayah dapat dilihat dari browser.
Kedua hal akan memastikan bahwa tidak peduli di mana kami telah menggulir di halaman dan apa pun menjadi ukuran jendela, elemen overlay hitam selalu mencakup viewport saat ini.
2. Isi Box: Sebuah kotak baik gaya dengan tombol dekat adalah semua yang kita butuhkan. Kita akan menempatkannya di tengah layar. Karena kita telah menghitung paling atas dan paling kiri koordinat relatif terhadap viewport saat ini dan kami juga memiliki dimensi viewport saat ini, kita dapat dengan mudah posisi ini di pusat, tidak punya otak! Kami akan memberikan ini z-index lebih besar dari hitam elemen overlay tersebut bahwa ini adalah di atas segalanya.
Selain itu, kami juga harus berhati-hati bahwa kedua elemen ini bergerak bersama dengan halaman dalam kasus pengguna mencoba untuk menggulir halaman ketika lightbox kami terbuka. Ini akan memastikan bahwa (1) elemen overlay hitam selalu mengisi kotak isi layar (2) selalu di pusat.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blackbox - A very simple Lightbox clone</title>
<script type="text/javascript">
/*
* Script: Blackbox (very simple Lightbox clone)
* Author: Arvind Gupta (contact@arvindgupta.co.in)
* Date: 14-Nov-09
* Copyright: 2009 Arvind Gupta
* You may freely use this script wherever
* you want and in whatever way you wish
* but please don't remove this note.
*
*/
// OBJECTS
// Black overlay element
var darkbox;
// Content box
var content;
// FUNCTIONS
function init()
{
// Set "onScroll" event handler
window.onscroll = scroll_box;
}
function open()
{
// Create elements
darkbox = document.createElement('div');
content = document.createElement('div');
// Style them with the existing ids
darkbox.id = 'darkbox';
content.id = 'content';
// FILL CONTENT BOX
// Have the close button
content.innerHTML = '<a style="position: absolute; top: -30px; right: -30px; text-decoration: none;" href="javascript:close();"><img style="border: none;" src="fancy_closebox.png" /></a>';
// The main content
content.innerHTML += '<div id="main_content"><h1>Hello</h1><p>Hello World!<br /> How is this looking?</p></div>';
// Add these elements to the body
document.body.appendChild(darkbox);
document.body.appendChild(content);
// Calciulate coordinates and such
var pos_top = document.documentElement.scrollTop
var pos_left = document.documentElement.scrollLeft;
var screen_width = document.documentElement.clientWidth;
var screen_height = document.documentElement.clientHeight;
// Place the "darkbox" element and give it the size
darkbox.style.top = pos_top + 'px';
darkbox.style.left = pos_left + 'px';
darkbox.style.height = screen_height + 'px';
darkbox.style.width = screen_width + 'px';
// Now place the content box at the center
content.style.left = (pos_left + (screen_width / 2.0) - (content.offsetWidth / 2.0)) + 'px';
content.style.top = (pos_top + (screen_height / 2.0) - (content.offsetHeight / 2.0)) + 'px';
}
function scroll_box ()
{
// If "Darkbox" open
if(darkbox != null)
{
// Find new topmost, leftmost position w.r.t the current viewport
// Also find new window size
var pos_top = document.documentElement.scrollTop
var pos_left = document.documentElement.scrollLeft;
var screen_width = document.documentElement.clientWidth;
var screen_height = document.documentElement.clientHeight;
// Positions elements accordingly
darkbox.style.top = pos_top + 'px';
darkbox.style.left = pos_left + 'px';
darkbox.style.height = screen_height + 'px';
darkbox.style.width = screen_width + 'px';
content.style.left = (pos_left + (screen_width / 2.0) - (content.offsetWidth / 2.0)) + 'px';
content.style.top = (pos_top + (screen_height / 2.0) - (content.offsetHeight / 2.0)) + 'px';
}
}
function close()
{
// Delete elements
document.body.removeChild(darkbox);
document.body.removeChild(content);
}
</script>
<style>
#darkbox {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.6;
filter:alpha(opacity=60);
background: #000;
}
#content {
position: absolute;
z-index: 1001;
background: #fff;
border: 10px solid #000;
width: 500px;
height: 300px;
}
#content #main_content {
overflow: auto;
width: 500px;
height: 300px;
}
</style>
</head>
<body onload="init();">
<a href="javascript:open()">Open Box</a>
</body>
</html>
itulah sebagai contoh dari scrip yang tadi
sobat bisa mengedit kata hello word di ganti dengan kata yang sobat inginkan.
sobat bisa mengedit kata hello word di ganti dengan kata yang sobat inginkan.
selamat mencoba dan sukses (y)
0 comments:
Post a Comment