Mari kita mulai
Dalam berbagai kriteria dan manifes kualitas terdapat item seperti memblokir gulir halaman saat jendela modal terbuka. Jendela modal menyiratkan interaksi hanya dengan itu.
Banyak yang akan mengajukan pertanyaan: “Mengapa tidak menggunakan solusi yang sudah jadi?”. Masalahnya adalah bahwa fungsi ini tidak diimplementasikan sama sekali, atau dilakukan dengan sangat buruk. Anda dapat menggunakan solusi paling sederhana dan terburuk:
.body { overflow: hidden;}
Di sini kita mendapatkan sedikit kejutan halaman.
Kode Perlu dicatat: masalah hanya terjadi ketika gulir berlangsung pada halaman, misalnya, di Safari tidak ada masalah seperti itu.
Beberapa solusi di ruang terbuka npm menawarkan penggantian gulir dengan indentasi atau blok yang ditata sebagai gulir (bilah abu-abu sederhana), banyak keajaiban, tetapi mereka tidak memperbaiki masalah.
Kami akan sedikit mengubah kode awal dan semuanya berfungsi:
.body { position:fixed; overflow-y: scroll; }
Sekarang masalah lain telah muncul: halaman melompat.
Kode Solusi melalui js sederhana: saat membuka halaman, kami mengambil nilai untuk menggulir halaman dan mengatur nilai ini ke properti
teratas dari tag
kode <body>.
function getBodyScrollTop() { return self.pageYOffset || (document.documentElement && document.documentElement.ScrollTop) || (document.body && document.body.scrollTop); } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop()
Terkadang di situs mungkin ada halaman yang memiliki sedikit konten dan tidak ada gulir, tetapi ketika Anda membuka jendela modal, kode kami menambahkannya. Mari kita sedikit memodifikasi gulir.
Solusi siap .
function existVerticalScroll() { return document.body.offsetHeight > window.innerHeight } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop() modal.classList.add('modal--open') if(existVerticalScroll()) {
Ketersediaan
Jika Anda tidak memikirkannya, akan ada kemungkinan gerakan menggunakan tab di luar jendela modal. Di gif, tekan saja
Tab beberapa kali.
Di Internet, tidak ada solusi sederhana untuk masalah ini, dan menulis sepeda
kruk Anda tidak terlalu rasional ketika ada
perpustakaan fokus-trap.js .
Di sini, penulis mengungkapkan secara lebih rinci topik perpustakaan dan masalah mereka .
Ringkasan
Bahkan jika ada beberapa jendela modal pada halaman, Anda dapat membungkus semua kode dalam satu fungsi dan meneruskan nama kelas dari jendela modal.
function initModal(className) {
Masalahnya pada pandangan pertama adalah sederhana, tetapi ada begitu banyak momen yang tidak terlihat. Saya pikir artikel ini akan membantu Anda membuat modal windows yang lebih baik.
Kode siapBahan yang berguna