Foundation-sites: Ungkapkan posisi modal?

Dibuat pada 29 Nov 2011  ·  26Komentar  ·  Sumber: foundation/foundation-sites

Menggunakan permata Rails v. 2.1.0 dengan Rails dan plugin terkaitnya diperbarui ke versi terbarunya.

Saya baru saja menerapkan contoh pengungkapan vanilla dari dokumentasi di aplikasi hobi yang sedang saya kerjakan dan saya mengalami masalah dengan pemosisiannya. Tampaknya itu memposisikan dirinya relatif terhadap markup lain pada halaman dan tidak relatif terhadap jendela browser. Dokumen tidak membahas pemosisian modal dan saya kesulitan menentukan mengapa modal tidak muncul di bagian atas halaman.

Dapatkah Anda memberikan informasi tambahan tentang bagaimana kotak modal Reveal menentukan posisinya di halaman dan/atau bagaimana saya dapat mengganti posisi default?

Komentar yang paling membantu

Saya mengalami masalah serupa pagi ini (menggunakan foundation-rails 5.4.5) dan menyelesaikannya dengan menambahkan yang berikut ke .reveal-modal untuk memperbaikinya dan memusatkannya pada halaman:

.reveal-modal.open {
  position:fixed;
  top:50%!important; /* override inline style injected from JS */
  left:50%;
  transform:translate(-50%, -50%);
}

Semua 26 komentar

Apakah Anda memiliki tautan sehingga kami dapat membantu mencari tahu apa yang terjadi?

Biarkan saya menjalankannya di tempat yang dapat Anda lihat dan kemudian saya akan mengirimi Anda pesan dengan detail login.

Oke, saya mengirimkan detailnya kepada Anda melalui pesan pribadi.

Saya pikir Anda menetapkan aturan di .column, .columns css Anda {position: relative;}

Modal pengungkapan diposisikan mutlak. Saya tidak tahu mengapa itu tidak diposisikan tetap. Mungkin untuk mengaktifkan pengguliran?

Jadi, modal yang benar-benar diposisikan menyelaraskan dirinya dengan induknya yang pertama diposisikan ( class="eight column" ). Anda dapat mencoba menambahkan css seperti ini ...

.reveal-modal { posisi: tetap;)

dan lihat apakah itu berfungsi seperti yang Anda inginkan

Oke. Itu dari baris 17 dari grid.css Foundation.

oke. saya tidak bisa membaca nama file Anda. Saya hanya pengguna - bukan pengembang zurb. Anda dapat mencoba hal yang diperbaiki atau melepaskan div modal Anda dan meletakkannya di bagian bawah html.

Sebenarnya, saya beralih ke ColorBox untuk modals dan hanya ingin melaporkan bug (jika itu bug dan bukan kesalahan saya). Terima kasih atas bantuannya dalam menemukan masalah! Saya menghabiskan berjam-jam bermain-main dengannya tetapi tidak dapat menemukan masalahnya.

Saya akan jujur, saya tidak bisa mengikuti di balik layar obrolan ini :) Apakah ada bug di Reveal atau apakah itu konflik dengan gaya lain?

Masalahnya adalah, jika Anda meletakkan modal pengungkapan di dalam kolom, modal pengungkapan sejajar dengan kolom itu alih-alih menyelaraskan ke jendela browser. Saya tidak tahu apakah ini sesuatu yang dapat Anda perbaiki atau tidak.

Sepertinya Anda dapat mengatur mengungkapkan-modal ke position:fixed sebagai default, tetapi saya tidak tahu apakah Anda memiliki alasan untuk menentangnya.

Oh, mengerti. Ya Reveal modals dirancang untuk ditempatkan di akhir halaman, bukan di dalam tata letak - kami menggunakan absolut alih-alih tetap sehingga Anda dapat terus menggulir halaman (jika Anda menginginkannya). Mengubahnya menjadi position:fixed akan memperbaikinya.

Mungkin yang terbaik untuk menyebutkannya di dokumen, kalau begitu.

Pada 30 November 2011, pukul 19:14, Jonathan [email protected] menulis:

Oh, mengerti. Ya Reveal modals dirancang untuk ditempatkan di akhir halaman, bukan di dalam tata letak - kami menggunakan absolut alih-alih tetap sehingga Anda dapat terus menggulir halaman (jika Anda menginginkannya). Mengubahnya menjadi position:fixed akan cocok.


Balas email ini secara langsung atau lihat di GitHub:
https://github.com/zurb/foundation/issues/129#issuecomment -2968907

@ smileyj68 tahu apa posisi: relatif lakukan di .column, .columns di grid.css? Posisi: tetap pada modal pengungkapan bukanlah pilihan saat bekerja di situs responsif karena Anda benar-benar perlu menggulirnya. Saya akan mencoba dan menimpanya di sini secara lokal dan akan menguji apakah itu merusak sesuatu. Tetapi jika Anda memiliki wawasan, saya ingin mendengarnya.

Masalah ini hanya menggigit saya di belakang juga. Semoga terdokumentasi...

Dan saya, kerja bagus untuk komentar ini. Dikatakan dalam dokumen untuk meletakkannya setelah semuanya tetapi ketika menggunakannya dengan Wordpress itu berarti di footer. Akan berguna jika dikatakan mengapa melakukan itu.

Gerakan mengungkap kekerasan seksual demi menghapuskannya. Setelah mengaturnya ke posisi: tetap; dan overflow: gulir; hal-hal bekerja dengan baik.

Ada solusi?! Mengatur posisi tetap bukanlah ide yang baik jika modal Anda besar. Jika ada yang menemukan solusi, silakan tulis di sini. Terima kasih!

saya masih mengalami masalah ini :(! Ada solusi? PLZ

Menyetel posisi ke tetap tidak berfungsi

Saya berhasil membuatnya bekerja. beralih dari pemosisian absolut ke pemosisian tetap berfungsi ketika saya membuka foundation.css dan foundation.min.css dan mengubah pemosisian pada kelas .reveal-modal di kedua file sebagai berikut:

-mutlak untuk tetap
- top:50px menjadi 30% (Anda dapat mengubah ini, saya perlu mengubahnya agar turun cukup jauh untuk dilihat)

Ini jelas merupakan masalah jika Anda menggunakan Foundation untuk lebih dari sekadar HTML statis. Kerangka Tema Yayasan saya untuk Shopify juga memiliki masalah dengan popup modal untuk gambar produk. Menggunakan .reveal-modal { position:fixed;overflow :scroll} tentu membantu. Tapi tidak ada solusi nyata. 'Mengungkapkan' bisa sangat jelek dan tidak praktis dalam kasus ini. Tidak ada jumlah CSS murni yang akan memperbaiki ini, sejauh yang saya bisa lihat.

Masalah yang Anda alami adalah modal Reveal dipengaruhi oleh induk pemosisian di rilis sebelumnya, jadi Anda seharusnya hanya memiliki modal Reveal sebagai anak langsung dari elemen body.

Anda seharusnya tidak melihat masalah ini dengan versi 4.3.2 karena memastikan bahwa modal dipindahkan menjadi anak langsung dari body sementara modal terlihat yang mengurangi masalah pemosisian aneh yang disebabkan oleh CSS Anda .

Jika Anda melihat ini di 4.3.2, silakan buka tiket dengan contoh, karena saya membuat perubahan khusus untuk memastikan bahwa ini berfungsi dengan benar.

Saya setuju bahwa " Reveal modals dirancang untuk ditempatkan di akhir halaman, bukan di dalam tata letak" harus ditempatkan dalam dokumentasi karena pemula dapat kesal dengan kelalaian ini. Saya harus mencari di seluruh web sebelum saya melihat komentar dari @ smileyj68 Terima kasih

@ chimdi2000 Pada 4.3.2, ini tidak lagi menjadi masalah karena javascript akan memindahkannya untuk Anda jika Anda tidak memilikinya di tempat yang tepat, jadi saya pikir dokumentasi lebih lanjut tidak diperlukan.

Terima kasih atas perhatiannya @seantimm. Saya kira saya sebaiknya melakukan pembaruan kerangka kerja tema Shopify Foundation 4!

@seantimm 4.3.2 telah memperbaiki masalah pemosisian saya tetapi karena memiliki elemen formulir di dalam pengungkapan dan dipindahkan ke luar formulir, mereka tidak dapat lagi dikirimkan.

Sebagai perbaikan khusus, saya telah menambahkan pengaturan untuk appendElement yang memungkinkannya ditambahkan ke lokasi tertentu dalam dokumen. Adakah peluang untuk menambahkan ini di rilis mendatang?

Saya menyadari ini adalah utas lama, tetapi pada Desember 2014, saya masih mengalami masalah ini. Memang ini adalah perbaikan yang cukup sederhana, tetapi tujuan menggunakan kerangka kerja seperti ini adalah agar kita tidak perlu menghabiskan waktu untuk hal-hal dasar dan dapat memfokuskan waktu kita di tempat lain.

Apakah ada rencana untuk menyempurnakan ini di rilis mendatang? Kemampuan untuk memilih apakah modal adalah posisi tetap atau absolut tampaknya merupakan fitur yang hebat. Sepertinya itu bisa dilakukan dengan beberapa variabel sass.

@ smileyj68 , dapatkah Anda menjelaskan mengapa diinginkan agar halaman terus dapat menggulir saat pengungkapan terbuka? Sepertinya saya bahwa ketika modal terbuka, konten halaman dimaksudkan untuk diblokir. Bukankah lebih baik untuk memperbaikinya dan mengatur properti overflow sehingga modal bergulir? Jika ini adalah default, itu tidak perlu ditempatkan di akhir halaman, yang merupakan kesulitan untuk banyak situasi CMS.

Juga, saya harus mengubah posisi pengungkapan-bg dari absolut menjadi tetap di semua proyek saya. Saya tidak mengerti mengapa itu akan ditetapkan sebagai absolut.

Saya mengalami masalah serupa pagi ini (menggunakan foundation-rails 5.4.5) dan menyelesaikannya dengan menambahkan yang berikut ke .reveal-modal untuk memperbaikinya dan memusatkannya pada halaman:

.reveal-modal.open {
  position:fixed;
  top:50%!important; /* override inline style injected from JS */
  left:50%;
  transform:translate(-50%, -50%);
}
Apakah halaman ini membantu?
0 / 5 - 0 peringkat