Jendela modal adalah wadah yang, ketika tautan diklik, muncul dan memberikan beberapa informasi. Saya rasa banyak yang sudah mengetahuinya, tetapi jika belum, tontonlah versi demonya untuk memahaminya. Sekarang jumlahnya sangat banyak dan masing-masing bekerja dengan caranya sendiri. Misalnya, ada yang sepenuhnya standar yang meminta Anda melakukan beberapa tindakan, dalam contoh ini konfirmasi. Atau, misalnya, opsi lain, saat Anda pertama kali mengunjungi situs tersebut, yang akan relevan untuk berbagai langganan grup di jejaring sosial. Ada jendela modal di internet CSS, baiklah, saya ingin mengambil bagian ini JavaScript, karena membuatnya lebih menarik dan berfungsi dengan baik di semua browser.
LANGKAH PERTAMA. kode JavaScript.
Untuk meluncurkan jendela modal, Anda harus meneruskan nilai ke fungsi jendela.onload. Di mana kita akan melewatkan dua elemen pengidentifikasi " A" Dan " B".
//melewati elemen dengan id "a" dan "b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); )
Kemudian kita menulis fungsinya " pertunjukanA", yang akan menampilkan jendela modal dan meneruskan ke elemen" A" Dan " B"styles yaitu kita mengatur transparansi, lebar dan pemblokiran jendela jika link tidak diklik" membuka".
//tampilkan jendela fungsi "showA" function showA() ( //Atur transparansi dan blokir tampilan //elemen "b" b.style.filter = "alpha(opacity=80)"; b.style. opacity = 0.8; b .style.display = "block"; // Atur pemblokiran dan padding atas ke 200px //dari elemen "a" a.style.display = "block"; a.style.top = "200px "; )
Setelah membuka jendela modal, kita perlu menutup atau menyembunyikannya nanti, untuk ini kita menulis fungsinya " sembunyikanA"yang akan menyembunyikan jendela modal dan menetapkan gaya untuk elemennya" A" Dan " B".
//Panggil fungsi "hideA", yang akan menyembunyikan //jendela untuk elemen "a" dan "b" fungsi hideA() ( b.style.display = "none"; a.style.display = "none"; )
Kode lengkap.
//melewati elemen dengan id "a" dan "b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); ) //menampilkan jendela fungsi " showA" function showA() ( //Setel transparansi dan blokir tampilan //elemen "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style. display = " block"; // Atur pemblokiran dan margin atas ke 200px // elemen "a" a.style.display = "block"; a.style.top = "200px"; ) //Panggil " fungsi hideA", yang akan menyembunyikan //jendela untuk elemen "a" dan "b" fungsi hideA() ( b.style.display = "none"; a.style.display = "none"; )
LANGKAH KEDUA. kode HTML.
Membuka
Di dalam tag "div" tunjukkan pengenal " A", yang akan berinteraksi dengan gaya CSS dan dengan kode JavaScript. Selanjutnya kita tambahkan tag lain " div" dan berikan pengenalnya " jendela", yang akan bertindak sebagai markup di dalam wadah jendela modal.
Di dalamnya kami menunjukkan tautan yang akan menjadi " menutup"jendela modal, berikan juga gaya" halaman" dan berikan gaya default " melayang: benar", yaitu kami akan menampilkan link untuk menutup jendela modal di pojok kanan atas.
Menutup
Kami mendaftarkan pengidentifikasi " B", yang akan menyembunyikan jendela.
Kode lengkap.
Buka tutup
LANGKAH KETIGA. kode CSS.
Gaya yang diperlukan CSS, yang tanpanya jendela modal tidak akan berfungsi dengan benar, atau lebih tepatnya, tidak akan berfungsi atau menampilkan informasi dengan benar sama sekali.
Jadi gaya pertama yang diperlukan mengenai posisi, dalam contoh ini adalah tetap. Ini memungkinkan Anda untuk menampilkan jendela modal sambil tetap membatasinya pada batas isian. Dengan menggunakan indeks-z kami menentukan berapa banyak jendela modal yang diidentifikasi setelah tautan diklik" membuka", Dan " menutup". Juga tampilan: tidak ada, yang memungkinkan Anda menyembunyikan jendela modal hingga tautan diklik.
#b ( posisi:tetap; atas:0; kiri:0; kanan:0; bawah:0; tampilan:tidak ada; latar belakang: abu-abu; indeks-z:1; ) #a ( batas:1 piksel hitam pekat; posisi:tetap ; latar belakang: #eff7ff; z-index:3; display:none; ) #windows ( padding:5px; lebar: 500px; tinggi: 300px; batas: 2px biru solid; ) a.pages ( latar belakang: #97cdff; warna: putih; padding: 4px; dekorasi teks: tidak ada; ) a:hover.pages ( latar belakang: merah; warna: putih; padding: 4px; dekorasi teks: tidak ada; )
Terima kasih banyak atas perhatian Anda!
3. Contoh jendela modal jQuery yang dipanggil dari link (dari Demo)
Kemungkinan besar, Anda telah melihat jendela modal pop-up di Internet lebih dari sekali - konfirmasi pendaftaran, peringatan, informasi referensi, pengunduhan file, dan banyak lagi. Dalam tutorial ini saya akan menawarkan beberapa contoh cara membuat modal windows paling sederhana.
Membuat jendela modal pop-up sederhana Mari kita mulai melihat kode untuk jendela modal sederhana yang akan segera munculkode jQuery
$(dokumen).siap(fungsi()
{
alert("Teks di jendela pop-up");
});
Tempelkan kode di mana saja di badan halaman Anda. Segera setelah halaman dimuat, tanpa perintah apa pun, Anda akan melihat jendela seperti ini:
Namun kode berikut akan dieksekusi setelah seluruh halaman dimuat ke dalam browser. Dalam contoh kita, setelah memuat halaman dengan gambar, jendela pop-up sederhana akan muncul:
$(jendela).beban(fungsi()
{
alert("Halaman telah selesai dimuat!)");
});
Anda sering dapat melihat bahwa formulir login dan registrasi terletak di jendela tersebut. Mari kita mulai berbisnis
Pertama, mari kita tulis bagian htmlnya. Kami menempatkan kode ini di badan dokumen Anda.
Memanggil jendela modal
Teks jendela modal
Menutup
Teks di jendela modal.
kode CSS. Baik di file css terpisah, atau di head.
tubuh (
font-family:verdana;
ukuran font:15px;
}
.link (warna:#fff; dekorasi teks: tidak ada)
.link:hover (warna:#fff; dekorasi teks:garis bawah)
#masker (
posisi:mutlak;
kiri:0;
atas:0;
indeks-z:9000;
warna latar belakang:#000;
tampilan: tidak ada;
}
#kotak.jendela (
posisi:mutlak;
kiri:0;
atas:0 piksel;
-atas: 40 piksel;
lebar:440 piksel;
tinggi:200 piksel;
tampilan: tidak ada;
indeks-z:9999;
bantalan: 20 piksel;
meluap: tersembunyi;
}
#kotak #dialog (
lebar:375 piksel;
tinggi:203 piksel;
bantalan:10 piksel;
warna latar:#ffffff;
}
.atas(
posisi:mutlak;
kiri:0;
atas:0;
lebar:370 piksel;
tinggi:30 piksel;
latar belakang: #0085cc;
bantalan: 8px 20px 6px 10px;
}
.menutup(
mengapung:kanan;
}
.isi(
padding-atas: 35 piksel;
}
Dalam kode jQuery, kita akan fokus pada posisi jendela modal dan topeng, dalam kasus kita penggelapan latar belakang secara bertahap.
Perhatian! Jangan lupa sertakan perpustakaan di bagian atas dokumen!
Menghubungkan perpustakaan dari situs web Google. Nah, kode jQuery itu sendiri.
kode jQuery
$(dokumen).siap(fungsi() (
$("a").klik(fungsi(e) (
e.preventDefault();
var id = $(ini).attr("href");
var maskHeight = $(dokumen).tinggi();
var maskWidth = $(jendela).lebar();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("lambat",0,8);
var winH = $(jendela).tinggi();
var winW = $(jendela).lebar();
$(id).css("atas", winH/2-$(id).height()/2);
$(id).css("kiri", winW/2-$(id).lebar()/2);
$(id).fadeIn(2000);
});
$(".window .close").klik(fungsi (e) (
e.preventDefault();
$("#mask, .jendela").hide();
});
$("#mask").klik(fungsi () (
$(ini).sembunyikan();
$(".jendela").sembunyikan();
});
});
Modal, overlay, dialog, apa pun sebutannya, inilah saatnya memikirkan kembali pola UI ini. Ketika pertama kali muncul, modals adalah solusi elegan untuk masalah antarmuka pengguna. Pertama, mereka menyederhanakan antarmuka pengguna. Kedua, menghemat ruang layar. Sejak itu, para desainer dengan mudah menggunakan modals, dan beberapa telah menerapkannya secara ekstrem. Modals telah menjadi versi jendela pop-up yang ditakuti saat ini. Pengguna menganggap jendela modal mengganggu dan telah belajar menutupnya secara naluriah dan otomatis.
Definisi:Jendela modal adalah elemen yang berada di atas jendela aplikasi utama. Ini memblokir jendela utama, tetapi membiarkannya terlihat di belakang jendela modal anak. Pengguna harus berinteraksi dengan jendela modal sebelum mereka dapat kembali ke aplikasi induk. — Wikipedia
PenggunaanAnda dapat menggunakan jendela modal kapan pun Anda membutuhkannya:
Menarik perhatian penggunaGunakan saat Anda ingin menghentikan tugas pengguna saat ini untuk menarik perhatian mereka ke sesuatu yang lebih penting.
Membutuhkan masukan penggunaGunakan saat Anda ingin mendapatkan informasi dari pengguna. Misalnya formulir pendaftaran dan otorisasi.
Tampilkan informasi tambahan dalam konteksGunakan jika Anda ingin menampilkan informasi tambahan tanpa kehilangan konteks halaman induk. Misalnya menampilkan gambar atau video yang lebih besar.
Tampilkan informasi tambahan (di luar konteks)Gunakan ketika Anda ingin menampilkan informasi yang tidak terkait langsung dengan halaman induk atau parameter lain yang “independen” dari halaman lain. Misalnya saja notifikasi.
Catatan: Jangan gunakan modals untuk menampilkan pesan kesalahan, pesan keberhasilan tugas, atau pesan peringatan. Tinggalkan mereka di halaman.
Anatomi jendela modalPenerapan overlay yang buruk dapat mengganggu penyelesaian tugas. Untuk memastikan jendela modal Anda tidak mengganggu pengguna, pertimbangkan hal berikut:
1.Escape menetasBerikan pengguna cara untuk keluar dengan memberi mereka cara untuk menutup jendela modal. Hal ini dapat dicapai dengan cara berikut:
- tombol batal
- Tombol tutup
- Kunci melarikan diri
- Klik di luar jendela
Tip aksesibilitas: Setiap jendela modal harus memiliki kontrol keyboard yang dapat diakses untuk menutup jendela. Misalnya, tombol escape harus menutup jendela.
2. JudulBerikan konteks kepada pengguna dengan judul modal. Hal ini memungkinkan pengguna mengetahui di mana dia berada karena mereka belum meninggalkan halaman aslinya.
Setelah mengklik tombol Tweet — Modal header: Buat tweet baru. Memberikan konteks. Tip: Label tombol (yang meluncurkan jendela modal) dan judul modal harus cocok
3. TombolLabel tombol harus berisi nama yang jelas. Ini berlaku untuk tombol apa pun. Untuk modal windows, tombol 'tutup' harus direpresentasikan sebagai ikon tombol 'tutup' atau 'x'.
Invision memiliki ikon tombol yang jelas Catatan: Jangan membuat ikon tombol membingungkan. Jika pengguna mencoba membatalkan suatu tindakan dan jendela modal muncul dengan tombol batal LAIN, kebingungan akan terjadi. “Apakah saya membatalkan pembatalan itu? Atau aku melanjutkannya?”
4. Penentuan ukuran dan lokasiJendela modal tidak boleh terlalu besar atau terlalu kecil, Anda hanya ingin ukurannya tepat. Tujuannya adalah untuk menjaga konteks, sehingga jendela modal tidak boleh memenuhi seluruh layar. Kontennya harus sesuai dengan jendela model. Jika bilah gulir diperlukan, Anda dapat membuat halaman baru.
- Letaknya ada di bagian atas layar, karena pada tampilan mobile modal window bisa saja hilang jika diletakkan di bawah.
- Ukuran — Jangan gunakan lebih dari 50% layar jendela model.
Saat Anda membuka jendela modal, gunakan efek lightbox (menggelapkan latar belakang). Ini menarik perhatian ke jendela modal dan menunjukkan bahwa pengguna tidak dapat berinteraksi dengan halaman induk.
Tip aksesibilitas: Atur fokus keyboard ke jendela modal.
6. Pengguna meluncurkan jendela modalJangan mengejutkan pengguna dengan jendela modal pop-up. Biarkan tindakan pengguna, seperti mengklik tombol, mengikuti link, atau memilih opsi, memicu jendela modal. Jendela modal yang terbuka sendiri dapat mengejutkan pengguna dan menyebabkannya menutup dengan cepat.
Jendela modal disebabkan oleh menekan tombol Masuk Jendela modal di perangkat seluler Modal dan perangkat seluler umumnya tidak bekerja sama dengan baik. Melihat konten sulit dilakukan karena modalnya terlalu besar, menggunakan terlalu banyak ruang layar, atau terlalu kecil. Tambahkan elemen seperti keyboard perangkat dan scrollbar bertumpuk. Pengguna hanya dapat menggerakkan jari dan memperbesar, mencoba menangkap bidang jendela modal. Ada alternatif yang lebih baik untuk modal windows, jadi sebaiknya tidak digunakan di perangkat seluler.
Jendela Modal yang Dibuat dengan Baik — Aksesibilitas Facebook 
Saat membuat jendela modal, jangan lupa untuk menambahkan kontrol keyboard yang dapat diakses. Pertimbangkan hal berikut:
Membuka jendela modal — elemen yang memanggil kotak dialog harus dapat diakses dari keyboard.
Memindahkan Fokus ke Jendela Dialog — Saat jendela modal terbuka, fokus keyboard harus dipindahkan ke awal.
Mengontrol Fokus Keyboard — Saat fokus dipindahkan ke kotak dialog, fokus harus “dikunci” di dalamnya hingga kotak dialog ditutup.
Menutup Dialog — Setiap jendela modal harus memiliki kontrol keyboard yang dapat diakses untuk menutup jendela itu.
ARIAStandar Aplikasi Internet Kaya yang Dapat Diakses (ARIA) mendefinisikan cara untuk meningkatkan aksesibilitas konten web dan aplikasi web.
Tag ARIA berikut dapat berguna saat membuat jendela modal yang dapat diakses: Peran = “dialog”, aria - tersembunyi, aria - label
Selain itu, waspadai pengguna dengan gangguan penglihatan. Mereka dapat menggunakan kaca pembesar layar pada monitor untuk memperbesar isi layar. Setelah diperbesar, pengguna hanya dapat melihat sebagian layar saja. Dalam hal ini, jendela modal akan ditampilkan dengan cara yang sama seperti pada perangkat seluler.
KesimpulanJika orang telah belajar mencoba menutup jendela modal secara otomatis, mengapa Anda ingin menggunakannya?
Menarik perhatian pengguna, menjaga konteks, dan menyederhanakan antarmuka pengguna adalah manfaat besar dari modal windows. Namun, mereka juga memiliki kelemahan karena mengganggu pengalaman pengguna dan membuat interaksi dengan halaman induk tidak mungkin dilakukan dengan menyembunyikan konten di balik jendela modal. Jendela modal mungkin tidak selalu menjadi jawabannya. Saat memilih, pertimbangkan hal berikut:
Daftar periksa
- Kapan kami menampilkan jendela modal?
- Bagaimana cara kami menampilkan jendela modal?
- Seperti apa tampilan jendela modal?
- Informasi apa yang kami berikan dan kumpulkan?
Ada komponen UI alternatif untuk jendela modal: non-modal atau dikenal sebagai toast (istilah yang digunakan oleh Microsoft dan Google dalam Desain Material). Baca postingan saya berikutnya untuk mengetahui lebih lanjut.
Modal windows adalah alat yang sering digunakan di gudang webmaster. Ini sangat cocok untuk menyelesaikan banyak tugas, seperti menampilkan formulir pendaftaran, blok iklan, pesan, dan sebagainya.
Namun, meskipun memiliki tempat penting dalam dukungan informasi proyek, jendela modal biasanya diimplementasikan dalam JavaScript, yang dapat menimbulkan masalah saat memperluas fungsionalitas atau memastikan kompatibilitas ke belakang.
HTML5 dan CSS3 membuatnya sangat mudah untuk membuat jendela modal.
markup HTMLLangkah pertama untuk membuat jendela modal adalah markup yang sederhana dan efektif:
Buka jendela modal
Di dalam elemen div Isi jendela modal ditempatkan. Anda juga perlu memberikan link untuk menutup jendela. Misalnya, mari kita tempatkan judul sederhana dan beberapa paragraf. Markup lengkap untuk contoh kita akan terlihat seperti ini:
Buka jendela modal X Jendela modal
Contoh jendela modal sederhana yang dapat dibuat menggunakan CSS3.
Ini dapat digunakan dalam berbagai hal, mulai dari menampilkan pesan hingga formulir pendaftaran.
GayaBuat kelas modalDialog dan mulai membentuk penampilan:
ModalDialog ( posisi: tetap; font-family: Arial, Helvetica, sans-serif; atas: 0; kanan: 0; bawah: 0; kiri: 0; latar belakang: rgba(0,0,0,0.8); indeks-z : 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transisi: opacity 400ms ease-in; tampilan: tidak ada; pointer-events: tidak ada; )
Jendela kita akan memiliki posisi tetap, yaitu akan bergerak ke bawah jika Anda menggulir halaman dengan jendela terbuka. Selain itu, latar belakang hitam kita akan meluas hingga memenuhi seluruh layar.
Latar belakang akan memiliki sedikit transparansi dan juga akan ditempatkan di atas semua elemen lainnya melalui penggunaan properti indeks-z.
Terakhir, kami mengatur transisi untuk menampilkan jendela modal kami dan menyembunyikannya dalam keadaan tidak aktif.
Mungkin Anda tidak tahu propertinya acara penunjuk, tetapi ini memungkinkan Anda mengontrol bagaimana elemen bereaksi terhadap klik mouse. Kami menetapkan nilai ke nilainya untuk kelas modalDialog, karena tautan tersebut tidak akan merespons klik mouse saat kelas semu aktif ":target".
Sekarang kita menambahkan kelas semu :target dan gaya untuk jendela modal.
ModalDialog:target ( tampilan: blok; pointer-events: auto; ) .modalDialog > div ( lebar: 400px; posisi: relatif; margin: 10% otomatis; padding: 5px 20px 13px 20px; radius batas: 10px; latar belakang: # fff; latar belakang: -moz-linear-gradient(#fff, #999); latar belakang: -webkit-linear-gradient(#fff, #999); latar belakang: -o-linear-gradient(#fff, #999); )
Kelas semu target mengubah mode tampilan elemen, sehingga jendela modal kita akan ditampilkan ketika link diklik. Kami juga mengubah nilai properti acara penunjuk.
Kami menentukan lebar dan posisi jendela modal pada halaman. Kami juga mendefinisikan gradien untuk latar belakang dan sudut membulat.
Menutup jendelaSekarang kita perlu mengimplementasikan fungsi penutupan jendela. Membentuk tampilan tombol:
Tutup ( latar belakang: #606061; warna: #FFFFFF; tinggi garis: 25px; posisi: absolut; kanan: -12px; perataan teks: tengah; atas: -10px; lebar: 24px; dekorasi teks: tidak ada; font- berat: tebal; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; bayangan kotak: 1px 1px 3px #000; ) .close:hover ( latar belakang: #00d9ff; )
Untuk tombol kami, kami mengatur latar belakang dan posisi teks. Kemudian kita posisikan tombolnya, buatlah bulat menggunakan properti frame pembulatan dan membentuk bayangan terang. Saat Anda mengarahkan mouse ke tombol, kami akan mengubah warna latar belakang.
Dalam artikel tentang membuat jendela modal menggunakan CSS, kita melihat apa itu jendela modal dan mengapa itu diperlukan. Kami juga membuat jendela hanya menggunakan css. Pada artikel ini saya akan menjelaskan cara membuat jendela modal javascript. Lebih khusus lagi, kita akan menggunakan perpustakaan jquery untuk membuat.
Jadi mari kita mulai membuat jendela modal di jquery. Untuk memperumit masalah, mari kita atur kondisi berikut. Kita perlu membuat jendela modal yang responsif. Dan kemampuan beradaptasi adalah ketika ukuran layar diperkecil, jendela juga akan berkurang. Mari mulai membuat jendela modal jquery adaptif dengan markup html.
Klik disini! X Minta panggilan
Saya pikir semuanya jelas dengan kodenya. Kami memiliki wrapper.wrapper, tempat konten situs kami berada. Ada tombol untuk memanggil jendela modal dengan id gowindow, jendela itu sendiri dengan id modal_window dan lapisan overlay myoverlay. Sekarang mari kita menulis gaya css.
Pembungkus ( lebar: 100%; margin: otomatis; lebar: otomatis;/*sama seperti 100%*/ lebar maksimal: 960px;/*lebar pembungkus maksimum*/ batas: 1px solid #000; warna latar: # F5F9FB; ) .button( /*-------*/ ) #modal_window ( lebar: 34%;/*untuk daya tanggap*/ tinggi: 300 piksel; radius batas: 10 piksel; batas: 3 piksel #fff solid; latar belakang : # e0e0e0; margin-top: -30%; margin-left: 33%; display: none; opacity: 0; /*transparansi penuh untuk animasi */ z-index: 5000; /*window harus berada di lapisan paling atas*/ padding -atas: 20px; perataan teks: tengah; posisi: relatif; ) #modal_window #window_close ( lebar: 21px; tinggi: 21px; posisi: absolut; atas: 10px; kanan: 10px; kursor: penunjuk; tampilan: blok; ) #myoverlay ( indeks-z: 3000; /*di atas semua lapisan tetapi di bawah jendela */ posisi: tetap; /*untuk tumpang tindih dengan situs*/ warna latar: #000; opasitas: 0,5; lebar: 100%; tinggi: 100 %; /*layar penuh */ atas: 0; kiri: 0; kursor: penunjuk; tampilan: tidak ada; )
Mari kita jelaskan kode cssnya. Kami menetapkan block.wrapper menjadi adaptif, itu berubah tergantung pada ukuran layar tetapi tidak lebih dari 960px. Saya tidak akan menampilkan kode tombol. Kita atur lebar jendela #modal_window sebagai persentase, lebarnya akan bergantung pada lebar .wrapper. Untuk memusatkan jendela, atur margin menjadi 33%. Ini dihitung sebagai 50%-17%, dimana 17% adalah setengah lebar jendela. Kami menyembunyikan jendela dengan properti display: none dan opacity: 0. Dengan kode #window_close dan #myoverlay, saya rasa semuanya sudah jelas. Sekarang mari kita menulis kode jquery. Kami berasumsi bahwa jqery sudah terhubung.
$(document).ready(function() ( $("#gowindow").click(function())(//klik pada tombol $("#myoverlay").fadeIn(400, //tampilkan lapisan overlay function() ( $("#modal_window") .css("display", "block") //membuat jendela terlihat.animate((opacity: 1, top: "50%"), 200); //meningkatkan transparansi, jendela lancar keluar )); )); /* menghapus jendela */ $("#window_close, #myoverlay").click(function())( //klik pada lapisan yang tumpang tindih atau silangkan $ ("#modal_window") .animate((opacity : 0, top: "45%"), 200, //transparansi aktif, jendela naik function())( $(this).css("display", "none"); //membuat jendela tidak terlihat $("# myoverlay").fadeOut(400); //menghapus lapisan yang tumpang tindih )); )); ));
Menurut saya kode Js tidak memerlukan penjelasan apa pun, karena saya berkomentar dengan cukup baik. Hanya itu yang saya pikirkan, jadi mari kita simpulkan. Kami membuat jendela modal responsif jquery sederhana
