Penyingkapan. Dukungan Anda membantu menjaga situs tetap berjalan. Kami mendapatkan biaya rujukan untuk beberapa layanan yang kami rekomendasikan di halaman ini. Belajarlah lagi
Tolong dicatat
Semua skrip dalam tutorial ini berfungsi penuh. Namun, beberapa properti tidak lagi didukung oleh browser modern. Untuk informasi tentang JavaScript modern, lihat tutorial JavaScript kami
Jendela popup adalah jendela browser web yang lebih kecil dari jendela standar dan tanpa beberapa fitur standar seperti bilah alat atau bilah status. Misalnya, tautan ini membuka jendela popup berukuran sedang. Jendela popup (alias popup) populer untuk halaman kecil bergaya sidebar yang menyimpang dari halaman utama
Munculan adalah salah satu efek tersulit dalam pengembangan web. Lebih dari satu pengembang web telah menangis mencoba membuat popup berfungsi dengan benar. Selain itu, beberapa teknik popup yang tidak bertanggung jawab telah membuat banyak halaman web menjadi cacat dan mesin pencari tidak dapat diakses
Tutorial ini akan memandu Anda langkah demi langkah dalam membuat jendela popup, termasuk memberi Anda satu set lengkap kode JavaScript salin dan tempel. Kami akan mulai dengan contoh dasar, menampilkan bagian utama ke popup. Kemudian kami akan menunjukkan teknik penargetan link di dalam popup kembali ke halaman utama. Terakhir, kita akan membahas banyak parameter untuk perintah open() yang menambahkan fitur ke popup Anda
Isi
Dasar
Kami akan memulai tutorial dengan membuat jendela popup dasar. Teknik yang dijelaskan di sini membahas semua masalah utama dalam sembulan. Munculan selalu muncul di depan. Tautan yang berbeda dapat menargetkan popup yang sama. Kodenya sederhana dan mudah dimodifikasi. Semuanya untuk tutorial selanjutnya adalah variasi dari tema yang dijelaskan di sini
Kode di halaman ini membuat popup yang dibuka dari link. Di bagian ini kami akan menampilkan kode hanya dengan deskripsi minimal yang Anda perlukan untuk menjalankannya. Untuk detail lebih lanjut, lihat
Pertama, salin skrip ini ke bagian “ halaman Anda
<SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT>Untuk saat ini, kami akan melewatkan detail tentang cara kerja skrip – meskipun kami akan kembali ke bagian tersebut untuk deskripsi baris demi baris – dan beralih ke langkah berikutnya. Skrip di atas membuka sembulan, tetapi ada yang perlu menjalankan skrip. Situasi yang paling umum adalah skrip dijalankan saat pengguna mengklik tautan. Tautan seperti berikut akan menjalankan skrip
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _Dan buat tautan ini
munculan saya
Sebagian besar tautannya seperti biasa. URL halaman yang ditautkan ada di atribut HREF. Kami telah menambahkan atribut tambahan yang disebut onClick. Salin kode apa adanya ke tautan Anda, hanya dengan sedikit modifikasi. Argumen kedua popup() — 'catatan' — menunjukkan nama jendela popup. Setiap jendela sembulan harus memiliki nama uniknya sendiri. Pastikan untuk memasukkan nama dalam tanda kutip tunggal (""). Jadi jika Anda ingin menamai popup 'stevie' maka ini adalah kodenya
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a>Baca Bagian Selanjutnya Ini Atau Anda Akan Menjadi Gila Mencoba Mencari Tahu Mengapa Popup Anda Tidak Berfungsi
Poin kecil tapi krusial sering diabaikan. Perintah di onClick="return popup(this, 'notes')" _1 harus dimulai dengan onClick="return popup(this, 'notes')" 2 atau skrip tidak akan berfungsi. Pastikan untuk memulai perintah dengan onClick="return popup(this, 'notes')" 2 seperti ini
onClick="return popup(this, 'notes')"Dan jangan beri spasi pada nama halaman di antara tanda kutip tunggal. Jika Anda melakukannya, tautan tersebut akan bertindak seperti tautan biasa
Popup Windows Dari Peta Gambar
Dalam variasi pertama kami, kami akan membuka munculan dari peta gambar, bukan dari jangkar biasa. Kami akan menggunakan skrip yang sama seperti dari contoh pertama kami. Dengan skrip itu, tag onClick="return popup(this, 'notes')" _4 di peta gambar dapat dibuat untuk membuka munculan dengan cara yang persis sama seperti tag onClick="return popup(this, 'notes')" 5
<MAP NAME="popupImgMap"> <AREA SHAPE=RECT HREF="mypopup.html" ALT="My Popup" COORDS="10,10,120,120" onClick="return popup(this, 'gloss')"> <AREA SHAPE=RECT HREF="yourpopup.html" ALT="Your Popup" COORDS="140,10,180,50" onClick="return popup(this, 'gloss')"> <AREA SHAPE=DEFAULT NOHREF> </MAP> <IMG SRC="mymap.gif" HEIGHT=130 WIDTH=190 ALT="Image Map Example" BORDER="0" USEMAP="#popupImgMap"> _Yang memberi kita peta gambar ini
Dibawah tenda. Detail Skrip Popup
Di bagian ini kita akan melihat detail teknis dari skrip popup
Naskah
Pertama mari kita lihat fungsi script yang membuka popup. Fungsi ini dapat dipanggil dari berbagai objek seperti tautan, gambar peta, atau elemen “ untuk membuka popup secara otomatis
<SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT>Baris 1 membuka elemen skrip. Baris 2 memulai fungsi popup(), mengambil dua argumen. Argumen pertama, mylink, adalah objek (tautan atau peta gambar) yang memanggil fungsi, atau bisa berupa string yang mewakili URL untuk popup. Argumen kedua, windowname, adalah nama unik untuk jendela popup. Setiap jendela popup harus memiliki nama yang unik. Lebih dari satu tautan dapat menargetkan sembulan yang sama dengan menggunakan nama sembulan unik yang sama
Baris 3 menguji keberadaan jendela. metode fokus. jendela. Fokusnya adalah bagaimana kami menampilkan popup ke depan setiap saat, meskipun sudah terbuka. Beberapa browser lama tidak memiliki jendela. fokus — browser-browser tersebut terdegradasi secara anggun dengan keluar dari fungsi dan membuka URL popup di jendela saat ini. Perhatikan bahwa tidak ada tanda kurung setelah jendela. fokus karena kami menguji keberadaan fungsi, bukan menjalankannya
Baris 4 mendeklarasikan variabel href, yang menampung URL yang harus dinavigasi oleh popup. Baris 5 dan 6 mencari tahu apa URL itu. Dalam 5 kami menguji apakah tautan saya adalah string. Jika itu adalah string, kami menetapkan nilai string ke href. Jika tautan saya bukan string maka kami menganggapnya sebagai objek onClick="return popup(this, 'notes')" 5 atau onClick="return popup(this, 'notes')" 4 dan pada baris 6 tetapkan ke href nilai properti href objek (yang ditetapkan dalam atribut HREF dari tag onClick="return popup(this, 'notes')" 5 atau onClick="return popup(this, 'notes')" 4)
Baris 7 adalah kernel sebenarnya dari keseluruhan fungsi — ini adalah tempat popup sebenarnya dibuka. jendela. open() membutuhkan tiga argumen. Yang pertama adalah URL untuk dibuka di popup. Dalam skrip kami, kami menggunakan variabel mylink. Yang kedua adalah nama popup yang unik — kami menggunakan variabel windowname. Argumen ketiga adalah string yang berisi daftar properti jendela yang dipisahkan koma. Sifat-sifat ini dijelaskan lebih terinci
Sejalan 8 kami mengembalikan false untuk membatalkan klik pada tautan. Jika kami tidak mengembalikan salah, tautan akan menavigasi jendela saat ini ke URL sembulan
Terakhir, baris 9 menutup fungsi popup(), dan baris 10 menutup skrip
Tautan
Sekarang mari kita lihat tautan yang membuka sembulan
<A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A>Seperti tautan biasa, tag onClick="return popup(this, 'notes')" _5 memiliki atribut ________9______9 yang memiliki atribut <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 0. Selain itu, tautan popup kami memiliki atribut onClick="return popup(this, 'notes')" 1. Saat pengguna mengeklik tautan, kode di onClick="return popup(this, 'notes')" 1 dipicu
Kode dimulai dengan kembali. Salah satu properti onClick="return popup(this, 'notes')" _1 adalah jika kode kembali salah, acara klik dibatalkan. Ingat bagaimana skrip mengembalikan false di bagian akhir? . Saat pengguna mengklik link, kode membatalkan klik dan membuka popup dengan caranya sendiri
Setelah kembali, kode memanggil fungsi <MAP NAME="popupImgMap"> <AREA SHAPE=RECT HREF="mypopup.html" ALT="My Popup" COORDS="10,10,120,120" onClick="return popup(this, 'gloss')"> <AREA SHAPE=RECT HREF="yourpopup.html" ALT="Your Popup" COORDS="140,10,180,50" onClick="return popup(this, 'gloss')"> <AREA SHAPE=DEFAULT NOHREF> </MAP> <IMG SRC="mymap.gif" HEIGHT=130 WIDTH=190 ALT="Image Map Example" BORDER="0" USEMAP="#popupImgMap"> 1 dengan dua argumen. Argumen pertama, <MAP NAME="popupImgMap"> <AREA SHAPE=RECT HREF="mypopup.html" ALT="My Popup" COORDS="10,10,120,120" onClick="return popup(this, 'gloss')"> <AREA SHAPE=RECT HREF="yourpopup.html" ALT="Your Popup" COORDS="140,10,180,50" onClick="return popup(this, 'gloss')"> <AREA SHAPE=DEFAULT NOHREF> </MAP> <IMG SRC="mymap.gif" HEIGHT=130 WIDTH=190 ALT="Image Map Example" BORDER="0" USEMAP="#popupImgMap"> _3, menunjukkan objek tautan itu sendiri. Skrip menggunakan referensi objek ini untuk mendapatkan URL untuk popup. Dengan mengirimkan referensi objek alih-alih mengetik URL dua kali, kami menghindari masalah yang melekat pada informasi yang berlebihan. Jika Anda mengubah URL atau menyalin dan menempelkan kode untuk tautan lain, Anda hanya perlu mengubah URL di satu tempat. Perhatikan bahwa <MAP NAME="popupImgMap"> <AREA SHAPE=RECT HREF="mypopup.html" ALT="My Popup" COORDS="10,10,120,120" onClick="return popup(this, 'gloss')"> <AREA SHAPE=RECT HREF="yourpopup.html" ALT="Your Popup" COORDS="140,10,180,50" onClick="return popup(this, 'gloss')"> <AREA SHAPE=DEFAULT NOHREF> </MAP> <IMG SRC="mymap.gif" HEIGHT=130 WIDTH=190 ALT="Image Map Example" BORDER="0" USEMAP="#popupImgMap"> _3 tidak boleh dalam tanda kutip
Argumen kedua adalah nama unik untuk popup. Setiap jendela sembulan harus memiliki nama uniknya sendiri. Tautan yang berbeda dapat menargetkan sembulan yang sama dengan semua menggunakan nama yang sama. Perhatikan bahwa nama harus dalam tanda kutip tunggal ("")
Acara
Mari telusuri peristiwa yang terjadi saat membuka sembulan. Saat pengguna mengeklik tautan, browser memicu peristiwa onClick="return popup(this, 'notes')" 1, menjalankan kode dalam atribut onClick="return popup(this, 'notes')" 1. Karena kata pertama adalah kembali, browser melihat apakah nilai benar atau salah dikembalikan. Perintah setelah kembali memanggil fungsi <MAP NAME="popupImgMap"> <AREA SHAPE=RECT HREF="mypopup.html" ALT="My Popup" COORDS="10,10,120,120" onClick="return popup(this, 'gloss')"> <AREA SHAPE=RECT HREF="yourpopup.html" ALT="Your Popup" COORDS="140,10,180,50" onClick="return popup(this, 'gloss')"> <AREA SHAPE=DEFAULT NOHREF> </MAP> <IMG SRC="mymap.gif" HEIGHT=130 WIDTH=190 ALT="Image Map Example" BORDER="0" USEMAP="#popupImgMap"> _1, meneruskan referensi ke objek link dan string yang berisi nama unik popup
Skrip pertama-tama memeriksa apakah browser memahami jendela. metode fokus (baris 5)
Jika browser tidak memiliki jendela. fokus (yang akan terjadi di beberapa browser lama) lalu skrip mengembalikan true, yang pada gilirannya dikembalikan dari event handler onClick. Karena onClick="return popup(this, 'notes')" _1 mengembalikan true, proses menghubungkan ke URL berlanjut seperti biasa di jendela saat ini
Sebagian besar browser akan memiliki jendela. fokus, jadi skrip berlanjut. Mulai baris 7, skrip memeriksa apakah argumen pertama (mylink) adalah string atau referensi objek. Tes ini memberikan fleksibilitas fungsi dengan memungkinkan kita memanggilnya dari objek link atau dari event onLoad dari elemen “. Either way script mendapatkan URL untuk mengarahkan popup ke
Selanjutnya, skrip benar-benar membuka sembulan menggunakan URL dan nama unik. Akhirnya, skrip mengembalikan false. Kembali ke link, nilai false membatalkan event click — yang tidak lagi diperlukan karena popup telah dibuka
Popup Windows Dari Formulir
Untuk variasi berikutnya pada tema popup, kita akan membuka popup dari form. Dalam contoh ini kita akan mengubah skrip. Skrip berikut dirancang khusus untuk membuka sembulan dari formulir. Kami akan mengabaikan detail cara kerja skrip untuk saat ini. Untuk detail mengerikan tentang skrip ini, lihat Di Bawah Terpal. Munculan Dari Skrip Formulir
Skrip ini berfungsi dengan formulir yang menggunakan <BODY onLoad="popup('autopopup.html', 'ad')"> 1 dan <BODY onLoad="popup('autopopup.html', 'ad')"> 2. Salin skrip berikut persis seperti apa adanya ke bagian “ dokumen Anda
<SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT>Sekarang kami akan menambahkan beberapa kode sehingga munculan terbuka saat pengguna mengirimkan formulir. Tambahkan atribut <BODY onLoad="popup('autopopup.html', 'ad')"> 3 ke tag <BODY onLoad="popup('autopopup.html', 'ad')"> 4
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _0Argumen pertama untuk <BODY onLoad="popup('autopopup.html', 'ad')"> _5 selalu ini, artinya bentuk itu sendiri. Argumen kedua, 'bergabung' dalam hal ini, adalah nama unik untuk popup
nama
surel
Dibawah tenda. Munculan Dari Skrip Formulir
Di bagian ini kita akan melihat detail teknis tentang cara membuka munculan untuk hasil formulir
Naskah
Pertama mari kita lihat script yang digunakan untuk membuka popup dari form
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _1Skrip ini sedikit berbeda dari skrip yang kami gunakan di sebagian besar contoh kami yang lain. Perbedaan utamanya adalah dengan tautan kami membuka sembulan dengan URL tautan, lalu membatalkan acara onClick="return popup(this, 'notes')" 1. Dengan formulir kami membuka sembulan kosong, menargetkan formulir di sembulan, dan kami tidak membatalkan acara <BODY onLoad="popup('autopopup.html', 'ad')"> 3
Baris 1 memulai elemen skrip dan baris 2 memulai fungsi <BODY onLoad="popup('autopopup.html', 'ad')"> 5. <BODY onLoad="popup('autopopup.html', 'ad')"> _5 mengambil dua argumen. Argumen pertama, <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 0, mengacu pada bentuk itu sendiri. Argumen kedua, <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> _1, menetapkan nama unik untuk jendela popup
Tes baris 3 untuk jendela. metode fokus yang diperlukan untuk menampilkan popup ke depan setiap saat
Baris 4 membuka popup. Perhatikan bahwa kami tidak memberikan URL popup. Saat munculan terbuka, itu kosong. Baris 5 menyetel properti target formulir ke nama sembulan, jadi ketika formulir dibuka, ia menargetkan sembulan alih-alih halaman saat ini
6 mengembalikan benar. Secara teknis baris ini tidak diperlukan karena pada atribut <BODY onLoad="popup('autopopup.html', 'ad')"> 3 kita tidak menggunakan return. Namun, mudah untuk melupakan dan memasukkan pernyataan pengembalian di… 6 membuat skrip sedikit lebih toleran terhadap kesalahan
Baris 7 menutup fungsi dan 8 menutup skrip
Menargetkan Pembuka
Setelah jendela popup dibuat, menautkan dari popup kembali ke jendela utama (mis. e. jendela yang membuka popup) sedikit lebih rumit dari yang diharapkan. Masalahnya adalah jendela utama tidak memiliki "nama" seperti jendela popup. Untungnya, JavaScript memberikan jawaban dalam bentuk <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 3
Untuk membuat tautan di jendela sembulan yang menargetkan kembali ke jendela utama, pertama-tama letakkan JavaScript ini di halaman sembulan
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _2Tautan yang menggunakan skrip ini terlihat seperti ini
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _3Jendela sembulan yang diluncurkan saat Anda mengeklik tombol di bawah menyertakan tautan itu
Buka Munculan
Menutup Jendela Popup Ketika Mereka Pergi ke Pembuka
Pada contoh sebelumnya link di popup menargetkan halaman utama, namun popup tetap terbuka di background setelah pengguna mengklik link tersebut. Di bagian ini, kami akan mengatur tautan agar menutup popup setelah klik
Fungsi <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 4 mengambil tiga parameter. Yang pertama selalu ini, artinya tautan itu sendiri. Parameter kedua dan ketiga adalah opsional dan standarnya salah. (Perhatikan bahwa kami tidak menggunakannya dalam contoh di atas, kami akan segera membahasnya. ) Parameter kedua menunjukkan apakah popup harus ditutup. Yang ketiga adalah jika tautan benar-benar mengirim pembuka ke sumber daya tertaut, atau jika pembuka hanya mendapatkan fokus terlepas dari apa halamannya saat ini. Parameter ketiga menyediakan cara yang aman untuk menutup popup setelah ditutup, namun tetap memiliki tautan ke halaman yang ada jika jendela tersebut sebenarnya bukan popup (seperti jika pengguna menemukan halaman tersebut melalui mesin pencari)
Saat pengguna mengeklik tautan, <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 4 memeriksa apakah browser memiliki perintah fokus (beberapa browser lama tidak) dan apakah jendela saat ini dibuka oleh jendela lain. Jika kondisi ini benar, jendela pembuka mendapatkan fokus, pembuka diarahkan ke URL yang direferensikan, dan skrip mengembalikan false. Karena fungsinya mengembalikan salah, tautan tidak menuju ke URL (skrip sudah melakukannya). Perhatikan bahwa tautan yang menargetkan pembuka sedikit berbeda dari tautan yang membuka jendela sembulan. Di link ini, onClick="return popup(this, 'notes')" 1 mengatakan "return goOpener(this)"… link di halaman sebelumnya tidak menggunakan return
Secara default, jendela popup tetap terbuka tetapi berada di latar belakang. Jika Anda ingin popup ditutup setelah kembali ke pembuka, tambahkan parameter kedua true ke pemanggilan fungsi <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 4
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _4Klik tautan di bawah untuk meluncurkan sembulan yang berisi tautan ini
Buka Munculan
Menutup Jendela Munculan
Jika Anda hanya ingin menutup popup tanpa melakukan hal lain, tambahkan true lainnya. Anda tetap harus menautkan ke URL yang valid jika pengguna menemukan halaman tersebut tanpa membukanya sebagai munculan
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _5Klik tautan di bawah untuk meluncurkan sembulan yang berisi tautan ini
Buka Munculan
Jendela Munculan <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 8 Parameter
Sampai saat ini kami fokus pada proses membuka dan menutup jendela popup. Kami sekarang akan beralih ke properti dari jendela popup itu sendiri. Semua properti popup diatur dalam perintah <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 8. Kami telah menggunakan <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> _8 di setiap skrip dalam tutorial ini
Secara khusus, properti popup diatur dalam argumen ketiga untuk <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 8 yang merupakan daftar properti untuk popup. Properti disetel agak mirip dengan cara atribut HTML disetel. nama properti diikuti dengan tanda sama dengan diikuti dengan nilainya. Properti dipisahkan dengan koma. Karena bug yang tersebar luas di MSIE, jangan beri spasi apa pun di daftar properti. Seluruh daftar properti masuk ke dalam tanda kutip. Jadi, misalnya, baris kode berikut menyetel lebar menjadi 400, tinggi menjadi 200, dan mengaktifkan bilah gulir
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _6Kita akan mulai dengan lebar & tinggi properti, yang selalu diperlukan kecuali dalam mode layar penuh. Semua properti lainnya bersifat opsional. Berikut daftar properti popup
- <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 2 dan <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 3. dimensi popup
- <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 4 dan <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 5. jarak dari sisi atas dan kiri layar
- <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _6. jika popup harus memiliki satu set tombol navigasi di bagian atas
- <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _7. jika munculan harus memiliki bilah lokasi tempat URL ditampilkan
- <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _8. jika munculan harus memiliki baris di bagian atas dengan tombol ke situs web populer
- <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _9. jika munculan harus memiliki bilah status di bagian bawah
- <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _0. jika popup harus memiliki menu
- <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _1. jika popup harus memiliki scroll bar
- <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _2. jika pengguna dapat mengubah ukuran munculan
- <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _3. jika popup harus ditutup ketika jendela pembukanya ditutup
- <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _4. cara membuka popup layar penuh
- <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _5. Mode saluran MSIE
<A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 2 dan <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 3 Parameter
<SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _8 dan <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 3 adalah satu-satunya properti yang diperlukan untuk jendela popup. Baris ini dalam skrip popup kami membuat popup dengan lebar 400 dan tinggi 200
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _7Yang menghasilkan popup ini
Parameter ________25______4 dan <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 5
Properti <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _4 dan <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 5 mengatur posisi popup di layar. Jika Anda tidak meletakkan <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _4 dan <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 5, browser akan menempatkan popup di tempat yang diinginkan. Misalnya, perintah dalam skrip popup ini menempatkan popup kiri dari kiri layar dan atas dari atas
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _8Yang menghasilkan popup ini
Parameter ________25______6
Properti <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _6 menunjukkan jika harus ada toolbar di popup. Bilah alat adalah bilah di bagian atas jendela dengan tombol untuk maju, mundur, beranda, dan tugas navigasi utama lainnya. Secara default, toolbar tidak ada di popup. Untuk menyetel sembulan agar bilah alat menyetel bilah alat ke ya
<A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> _9Yang menghasilkan popup ini
Parameter <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 7
Bilah <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _7, atau bilah alamat, adalah tempat URL ditampilkan di bagian atas jendela. Secara default, munculan tidak memiliki bilah lokasi. Untuk mengonfigurasi popup sehingga memiliki bilah lokasi, atur <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 7 menjadi ya di perintah open()
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a> 0Yang menghasilkan popup ini
Parameter ________25______8
Bilah <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _8 berisi serangkaian tombol untuk situs web favorit Anda. Secara default bilah direktori tidak ada di jendela sembulan. Untuk menyetel munculan dengan bilah direktori, setel <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 8 ke ya
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a> 1Yang menghasilkan popup ini
Parameter <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> _9
Bilah status adalah tempat browser menampilkan pesan untuk pengguna. Misalnya, sebagian besar browser menampilkan URL tautan saat mouse melewati tautan tersebut. Secara default, munculan tidak memiliki bilah status. Untuk menyetel sembulan dengan bilah status, setel status ke ya di perintah <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 8. Misalnya, perintah dalam skrip popup ini membuat popup yang memiliki bilah status
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a> 2Yang menghasilkan popup ini
Parameter <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _0
Menu bar adalah menu untuk jendela popup. Secara default popup tidak memiliki bilah menu. Anda dapat mengonfigurasi popup untuk memiliki menu dengan menyetel <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> 0 menjadi ya di perintah <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 8
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a> _3Yang menghasilkan popup ini
Parameter <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> 1
Secara default popup tidak memiliki scroll bar. Ini menjadi masalah jika konten popup memakan lebih banyak ruang daripada halaman pertama. Biasanya merupakan ide bagus untuk menyetel munculan dengan bilah gulir. Setel popup dengan bilah gulir dengan menyetel properti <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> 1 ke <A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> 21
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a> _4Yang menghasilkan popup ini
Dalam situasi di mana scrollbar sebenarnya tidak diperlukan karena konten tidak mengisi bahkan satu jendela pun, MSIE dan Netscape menangani hal-hal yang sedikit berbeda. MSIE menempatkan scroll bar berwarna abu-abu, Netscape tidak menempatkan scroll bar sama sekali. Tak satu pun dari mereka menempatkan bilah gulir horizontal di jendela jika tidak diperlukan
Parameter <A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> 22
Secara default popup tidak dapat diubah ukurannya oleh pengguna. Ini biasanya bukan masalah… kebanyakan popup hanya berisi catatan kecil atau iklan. Namun, jika munculan Anda berisi banyak informasi, merupakan sentuhan yang bagus untuk memungkinkan pengguna mengubah ukuran jendela menjadi sesuatu yang lebih nyaman. Setel popup ke <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _2 dengan menyetel properti <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> 2 ke <A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> 21 di perintah <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 8. Misalnya, perintah dalam skrip popup ini membuka popup yang dapat diubah ukurannya
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a> 5Yang menghasilkan popup ini
Parameter <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _4
Variasi populer pada tema jendela popup adalah membuka jendela dalam mode layar penuh. Layar penuh berarti bahwa jendela berukuran penuh dari layar dan menyediakan area tampilan halaman sebanyak mungkin. MSIE dan Netscape mengambil parameter berbeda untuk jendela layar penuh, tetapi Anda dapat menggunakan kedua versi tersebut. Dalam perintah <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> _8 masukkan <A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> 29 untuk Netscape, dan <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> 4 (tanpa nilai apa pun) untuk MSIE. Jadi, misalnya, perintah dalam skrip popup ini membuka jendela layar penuh
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a> 6Yang menghasilkan popup ini
Perhatikan bahwa dalam perintah <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 8 tidak ada properti ________25______3 atau <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> 2. Biarkan properti itu keluar atau Netscape tidak akan membuka jendela dalam mode layar penuh
Di MSIE hanya ada dua cara untuk menutup jendela layar penuh. Kebanyakan orang tidak mengetahui yang pertama (tekan ALT+F4) jadi Anda perlu menyediakan yang kedua, yang dilakukan dengan Javascript. Cara termudah untuk menyediakan tombol tutup adalah dengan menggunakan skrip kami untuk merujuk kembali ke pembuka. Salin skrip itu ke halaman layar penuh, lalu gunakan skrip di tautan seperti ini
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a> 7Tautan dalam contoh ini menutup jendela layar penuh dan memberikan fokus ke pembuka, tetapi hanya jika jendela tersebut benar-benar layar penuh dan dibuka dari jendela lain. Jika kondisi tersebut tidak benar (dan jika, misalnya, pengguna menemukan halaman tersebut melalui mesin telusur eksternal), jendela saat ini akan membuka sumber daya tertaut
Parameter <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _3
Munculan "bergantung", konsep yang hanya dikenali oleh Netscape, artinya munculan menutup ketika jendela pembukanya tertutup. Buat popup <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> 3 dengan menyetel properti <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> 3 ke <A HREF="/code-samples/basicpopup/" onClick="return popup(this, 'notes')">my popup</A> 21 di perintah <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 8. Misalnya, perintah berikut dalam skrip popup membuat popup dependen. Jika Anda menggunakan Netscape, coba buka popup, lalu tutup jendela ini
<a href="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</a> _8Yang menghasilkan popup ini
Di beberapa browser lama, saat munculan tergantung, ia tidak mendapatkan ikon di bilah tugas (strip di sepanjang bagian bawah layar)
Parameter <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } </SCRIPT> _5
Yang menghasilkan popup ini
Anda dapat menunjukkan mode saluran MSIE dan mode layar penuh Netscape dalam perintah <SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT> 8 yang sama. Misalnya, perintah dalam skrip popup ini membuka jendela layar penuh di Netscape dan mode saluran di MSIE
onClick="return popup(this, 'notes')" 0Yang menghasilkan popup ini
fungsi popup(mylink, windowname){if (. jendela. fokus) kembali benar; . href; . buka (href, nama jendela, 'lebar = 400, tinggi = 200, bilah gulir = ya'); . jendela. fokus) kembali benar; . open(' ', windowname, 'height=200,width=400,scrollbars=yes'); . target=namajendela;