, dengan konten tertentu di dalamnya dan tombol "Tutup", yang dibuat secara eksklusif melalui css.

Buka jendela 1 Buka jendela 2 Video di jendela 3 Foto di jendela 4

Dalam contoh kode di atas, untuk kejelasan, saya menulis penjelasan singkat di wadah modal windows. Itu tetap untuk Anda dengan analogi, di wadah div jendela pop-up, tempatkan konten Anda, baik itu teks sederhana, gambar, atau video dari sumber pihak ketiga mana pun, YouTube, Vimeo, dll. Tautan untuk memanggil jendela modal, Anda dapat membuat teks, atau Anda dapat mendesainnya dalam bentuk tombol gradien yang indah, seperti pada contoh.

Langkah 2. CSS

Langkah selanjutnya, ini yang paling menarik, penting untuk menyiapkan semua gaya yang diperlukan untuk jendela modal kita, atur penampilan dan menambahkan fungsionalitas. Saya telah menghilangkan gaya halaman dasar agar tidak membingungkan, dan telah menambahkan beberapa komentar dengan komentar untuk kejelasan:

/ * Pemadaman dasar dan gaya lapisan modal * / .overlay (atas: 0; kanan: 0; bawah: 0; kiri: 0; indeks-z: 1; visibilitas: tersembunyi; / * latar belakang gelap * / warna latar: rgba (0, 0, 0, 0.7); opacity: 0; posisi: tetap; / * pemosisian tetap * / kursor: default; / * jenis kursor * / -webkit-transition: opacity .5s; -moz-transition: opacity . 5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transisi: opacity .5s;) .overlay: target (visibilitas: terlihat; opacity: 1;) .is-image (atas: 0 ; kanan: 0; bawah: 0; kiri: 0; tampilan: blok; margin: otomatis; lebar: 100%; tinggi: otomatis; / * membulatkan sudut gambar sebaris * / -webkit-border-radius: 4px; -moz - radius batas: 4px; -ms-border-radius: 4px; radius batas: 4px;) / * elemen m-media yang disematkan, bingkai * / embed, iframe (atas: 0; kanan: 0; bawah: 0; kiri : 0; tampilan: blok; margin: otomatis; min-width: 320px; max-width: 600px; lebar: 100%;) .popup h1 (/ * heading 1 * / color: # 008000; text-align: kiri ; teks-bayangan: 0 1p x 3px rgba (0,0,0, .3); font: 24px "Trebuchet MS", Helvetica, sans-serif; font-berat: tebal; ) .popup h2 (/ * heading 2 * / color: # 008000; text-align: left; text-shadow: 0 1px 3px rgba (0,0,0, .3); font: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Bentuk gaya jendela modal *** / .popup (atas: 0; kanan: 0; kiri: 0; ukuran font: 14px; indeks-z: 10; tampilan: blok; visibilitas : tersembunyi; margin: 0 otomatis; lebar: 90%; min-width: 320px; max-width: 600px; / * pemosisian tetap, jendela stabil saat menggulir * / posisi: tetap; padding: 15px; perbatasan: 1px solid # 383838 ; / * pembulatan sudut * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * outer box-shadow * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); - ms-box -shadow: 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); box-shadow: 0px 0px 6px rgba ( 0, 0 , 0, 0.8); / * transparansi penuh jendela, muncul saat klik * / opacity: 0; / * efek transisi (muncul) * / -webkit-transiti pada: semua kemudahan .5s; -moz-transisi: semua kemudahan .5s; -ms-transisi: semua kemudahan .5s; -o-transisi: semua kemudahan .5s; transisi: semua kemudahan .5s; ) / * mengaktifkan jendela untuk muncul dan menggelapkan latar belakang * / .overlay: target + .popup (atas: 20%; / * posisi jendela dari atas halaman saat muncul * / visibilitas: terlihat; opacity: 1; / * hapus transparansi * /) / * bentuk tombol tutup * / .close (posisi: absolut; atas: -10px; kanan: -10px; padding: 0; lebar: 20px; tinggi: 20px; batas: 2px solid #ccc; -webkit-border-radius: 15px ; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba (61, 61, 61, 0. delapan); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; kotak-bayangan: 0px 0px 10px # 000; perataan teks: tengah; dekorasi teks: tidak ada; font-berat: tebal; tinggi garis: 20px; / * atur nilai dan efek transisi saat mengarahkan kursor * / -webkit-transition: all easy .8s; -moz-transisi: semua kemudahan .8s; -ms-transisi: semua kemudahan .8s; -o-transisi: semua kemudahan .8s; transisi: semua kemudahan .8s; ) .close: sebelum (warna: rgba (255, 255, 255, 0.9); konten: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0.9); ukuran font: 12px;) .close: hover (background-color: rgba (252, 20, 0, 0.8); / * putar tombol di hover * / -webkit-transform: rotate (360deg); -moz-transform: rotate (360deg); - ms -transform: rotate (360deg); -o-transform: rotate (360deg); transform: rotate (360deg);) / * opsional saat menambahkan lampiran * / .popup p, .popup div (margin-bottom: 10px;)

Seperti yang Anda lihat teman-teman, semuanya cukup sederhana dan tidak ada kekacauan yang tidak perlu. Jika Anda melakukan semuanya dengan benar, Anda akan mendapatkan di gudang senjata Anda, jendela pop-up modal yang luar biasa di mana Anda dapat menempatkan konten apa pun, baik itu konten teks, foto, berbagai formulir pendaftaran, dan masukan, atau video dari sumber pihak ketiga mana pun. Bereksperimenlah dengan parameter, ubah jendela sesuai keinginan hati Anda, dan, jika mungkin, bagikan praktik terbaik Anda, serta masalah yang tiba-tiba muncul, di komentar.

Saat ini, untuk berbagai situs, semua jenis jendela modal pop-up - pop-up - untuk pendaftaran, otorisasi, jendela informasi, - segala macam bentuk dan ukuran telah menjadi norma. Ada juga sejumlah besar plugin selain jQuery untuk sederhana dan kreasi yang nyaman popup tersebut - Shadowbox yang sama, misalnya.

Tampilan, ukuran, dan desain pop-up semacam itu benar-benar bervariasi - dengan overlay, bayangan, animasi - tak terhitung jumlahnya. Apa yang menyatukan mereka, mungkin, adalah fakta bahwa mereka biasanya ditampilkan di bagian paling tengah halaman - baik secara horizontal maupun vertikal. Dan pemusatan dilakukan melalui JS. Saya tidak akan membahas detail perhitungan ini, saya hanya akan menjelaskannya secara singkat:

Kode HTML popup biasanya memiliki struktur sebagai berikut:

- Munculan dengan konten ->

Dan CSS ( di sini dan di bawah ini, saya sengaja akan menghilangkan penulisan beberapa properti yang diperlukan hanya untuk beberapa browser dan versinya, hanya menyisakan yang paling dasar):

Munculan__overlay (
posisi: tetap;
kiri: 0;
atas: 0;
latar belakang: # 000;
opasitas: .5;
filter: alfa (opacity = 50);
indeks-z: 999
}
.muncul (
posisi: mutlak;
lebar: 20%;
indeks-z: 1000;
perbatasan: 1px solid #ccc;
latar belakang: #fff
}

JS menentukan browser dan versi browser, dan berdasarkan ini, ia menghitung ukuran area kerja dan ukuran popup itu sendiri (jika tidak ditentukan), dan kemudian perhitungan sederhana dari posisi sudut kiri atas dilakukan (properti css kiri dan atas untuk .popup). Banyak plugin juga bereaksi terhadap pengubahan ukuran halaman, menghitung ulang semuanya setiap waktu sehingga popup terletak tepat di tengah ruang kerja.

Saya secara alami perfeksionis (saya tahu, kadang-kadang buruk), dan sering mengganggu bahkan pada detail kecil, mencoba untuk meningkatkan dan menambahkan ekstensibilitas maksimum yang mungkin untuk detail ini, dan saya tidak bisa tidak terpikat pada saat ini di pekerjaan semua plugin ini. Muncul pemikiran bahwa semua pekerjaan memposisikan popup dapat digeser dari bahu JS ke bahu browser itu sendiri, yaitu, pekerjaan ini dapat dilakukan dengan menggunakan CSS.

Inilah yang akan kami lakukan.

Di bawah ini saya akan memberikan contoh popup yang berfungsi di semua versi utama browser utama. Untuk membuatnya bekerja dengan benar di IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Jadi, kami memiliki halaman dengan tombol, ketika diklik akan muncul jendela modal dengan beberapa informasi, dan semua konten lainnya harus diarsir oleh overlay.

Mari kita mulai dengan kode HTML. Strukturnya akan sedikit berbeda dari kode yang ditunjukkan di atas, mengapa - lebih lanjut tentang ini di bawah dalam artikel; kelas elemen akan tetap sama:

< div class ="popup__overlay">
< div class ="popup">

Dan beberapa CSS:

Munculan__overlay (
posisi: tetap;
kiri: 0;
atas: 0;
lebar: 100%;
tinggi: 100%;
indeks-z: 999
}
.muncul (
}

Ukuran tetap

Opsi termudah. Anda tidak perlu menemukan sesuatu yang baru:

Muncul (
kiri: 50%;
atas: 50%;
lebar: 400px;
tinggi: 200 piksel;
margin-kiri: -200px;
margin-atas: -100px
}

Margin negatif dari setengah lebar dan tinggi adalah sepele dan membosankan, tidak ada yang orisinal tentang itu.

Ukuran popup tergantung pada konten

Pertama, penyelarasan horizontal tampaknya lebih mudah. Jika popup memiliki lebar tetap, maka berikut ini sudah cukup:

Muncul (
margin: otomatis
}

Ini tidak akan mempengaruhi perataan vertikal dengan cara apa pun, dan, omong-omong, jika Anda hanya membutuhkan perataan horizontal, maka Anda dapat berhenti di situ dengan menentukan beberapa margin atas popup lainnya. Tapi ini tidak cukup bagi kita! Lanjutkan.

Penjajaran vertikal. Di sinilah menjadi menarik. Tentu saja, tabel atau emulasi tabel menggunakan display: table & display: table-cell akan mengatasi tugas seperti itu tanpa masalah, tetapi membuat ini berfungsi di IE lama lebih mahal. Tabel juga menghilang - untuk alasan yang jelas.

Jadi, marginnya sudah hilang - kami tidak tahu ukurannya. Mari kita ingat properti apa yang memiliki efek serupa. Ya, perataan teks. Tetapi hanya untuk elemen sebaris. OKE. Tampaknya Tuhan sendiri yang memerintahkan penggunaan display: inline-block - elemen blok di mana seseorang dapat menerapkan properti untuk elemen inline. Dengan dukungan properti ini di semua browser, semuanya, bisa dikatakan, beres. Kode menjadi sesuatu seperti ini:

Munculan__overlay (
posisi: tetap;
kiri: 0;
atas: 0;
lebar: 100%;
tinggi: 100%;
indeks-z: 999;
perataan teks: tengah
}
.muncul (
tampilan: inline -blok;
vertikal-align: tengah
}

Tetap perataan vertikal - perataan vertikal baik-baik saja bagi kami. Dalam situasi lain, itu juga akan sesuai untuk menggunakan tinggi garis, tetapi karena kami tidak memiliki tinggi halaman tetap (tinggi garis dalam konteks ini), kami tidak dapat menggunakannya di sini. Satu trik datang untuk menyelamatkan dengan penyelarasan vertikal elemen dengan ukuran yang tidak diketahui. Saya ingat persis bahwa saya menemukan metode ini di Habré, tetapi, sayangnya, saya tidak dapat menemukan tautan ke topik itu. Metode ini terdiri dari yang berikut: elemen blok sebaris dengan lebar nol dan tinggi 100% induk ditambahkan, yang "memperluas" tinggi garis hingga 100% tinggi induk, yaitu, hingga ketinggian halaman yang berfungsi daerah. Mari kita membuatnya lebih elegan dengan menggunakan elemen semu daripada markup yang tidak perlu:

Popup__overlay: setelah (
tampilan: inline -blok;
lebar: 0;
tinggi: 100%;
vertikal-align: tengah;
isi: ""
}

Tetap menambahkan penggelapan overlay semi-transparan - rgba akan menangani ini. Semuanya! Sekarang posisi popup dikendalikan hanya melalui browser di tingkat CSS.

Dalam pelajaran ini, saya tidak akan mengungkapkan rahasia untuk desainer tata letak berpengalaman dan guru css, tetapi artikel ini akan berguna untuk pemula. di sinilah Anda dapat mempelajari cara membuat pop-up di atas seluruh situs Anda.

Paling sering, jendela seperti itu muncul setelah melakukan tindakan tertentu di situs, misalnya, pengguna mengklik tautan "Minta panggilan balik" dan formulir pemesanan muncul di depannya.

Sangat nyaman untuk menggunakan jendela PopUp bersama dengan ajax, tetapi ini adalah topik untuk pelajaran lain.

Semakin banyak sumber daya web mulai muncul di web yang menggunakan pop-up PopUp. Semua orang tahu sebagai contoh. jaringan sosial... Semua data yang tidak perlu dari tangkapan layar telah dihapus.

dalam kontak dengan

Facebook

Indonesia

Saya pikir ada cukup alasan untuk mulai mempelajari pertanyaan: bagaimana membuat pop-up PopUp di situs Anda.

Pernyataan masalah (TOR)

Anda perlu membuat jendela pop-up dengan layar gelap di atas seluruh situs.

Larutan

Metode 1

html

css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (lebar: 100%; tinggi: 2000px; warna latar: rgba (0,0,0,0.5); overflow: hidden; position: fixed; top: 0px;) .b-popup .b-popup -konten (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Hasil:

Sangat sering disarankan untuk menggunakan:

Posisi: mutlak;
Ya, hasilnya sama, tetapi karena fakta bahwa kami telah mengatur ketinggian blok "shading", bilah gulir muncul. Itu sebabnya metode ini tidak cocok.

Metode 2

Metode ini tidak berbeda secara dramatis dari Metode 1, tetapi saya merasa lebih nyaman.

HTML (tidak berubah)

Css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (width: 100%; min-height: 100%; background-color: rgba (0,0,0,0.5); overflow: hidden; position: fixed; top: 0px;) .b-popup. b-popup-content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Hasilnya mirip

Berkat properti: tinggi minimum: 100%; blok kami "pemadaman" telah memperoleh lebar 100% dan tinggi minimum di 100% layar.

Satu-satunya kelemahan metode ini Apakah itu Internet Explorer mendukung properti ini hanya sejak versi 8.0.

Menambahkan sihir ke Jquery

Sekarang mari tambahkan link untuk menyembunyikan/menampilkan popup kita.

Untuk melakukan ini, Anda perlu menghubungkan perpustakaan JQuery dan skrip kecil:

Juga HTML perlu diperbarui:

Hasil

Sekarang, ketika halaman dimuat, PopUp akan hilang.

Anda dapat melihat hasilnya di sini.

Dalam pelajaran ini, saya tidak akan mengungkapkan rahasia untuk desainer tata letak berpengalaman dan guru css, tetapi artikel ini akan berguna untuk pemula. di sinilah Anda dapat mempelajari cara membuat pop-up di atas seluruh situs Anda.

Paling sering, jendela seperti itu muncul setelah melakukan tindakan tertentu di situs, misalnya, pengguna mengklik tautan "Minta panggilan balik" dan formulir pemesanan muncul di depannya.

Sangat nyaman untuk menggunakan jendela PopUp bersama dengan ajax, tetapi ini adalah topik untuk pelajaran lain.

Semakin banyak sumber daya web mulai muncul di web yang menggunakan pop-up PopUp. Contohnya adalah jejaring sosial yang sudah dikenal. Semua data yang tidak perlu dari tangkapan layar telah dihapus.

dalam kontak dengan

Facebook

Indonesia

Saya pikir ada cukup alasan untuk mulai mempelajari pertanyaan: bagaimana membuat pop-up PopUp di situs Anda.

Pernyataan masalah (TOR)

Anda perlu membuat jendela pop-up dengan layar gelap di atas seluruh situs.

Larutan

Metode 1

html

css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (lebar: 100%; tinggi: 2000px; warna latar: rgba (0,0,0,0.5); overflow: hidden; position: fixed; top: 0px;) .b-popup .b-popup -konten (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Hasil:

Sangat sering disarankan untuk menggunakan:

Posisi: mutlak;
Ya, hasilnya sama, tetapi karena fakta bahwa kami telah mengatur ketinggian blok "shading", bilah gulir muncul. Itu sebabnya metode ini tidak cocok.

Metode 2

Metode ini tidak berbeda secara dramatis dari Metode 1, tetapi saya merasa lebih nyaman.

HTML (tidak berubah)

Css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (width: 100%; min-height: 100%; background-color: rgba (0,0,0,0.5); overflow: hidden; position: fixed; top: 0px;) .b-popup. b-popup-content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Hasilnya mirip

Berkat properti: tinggi minimum: 100%; blok kami "pemadaman" telah memperoleh lebar 100% dan tinggi minimum di 100% layar.

Satu-satunya kelemahan metode ini adalah Internet Explorer hanya mendukung properti ini sejak versi 8.0.

Menambahkan sihir ke Jquery

Sekarang mari tambahkan link untuk menyembunyikan/menampilkan popup kita.

Untuk melakukan ini, Anda perlu menghubungkan perpustakaan JQuery dan skrip kecil:

Juga HTML perlu diperbarui:

Hasil

Sekarang, ketika halaman dimuat, PopUp akan hilang.

Anda dapat melihat hasilnya di sini.

Sebuah jendela modal yang sederhana dalam hal fungsi, yang sepenuhnya dijalankan dalam CSS murni, di mana Anda dapat meletakkan di bawah fungsi yang berbeda untuk dipanggil di situs. Mungkin ini salah satu dari sekian banyak yang saya temui dari pemilihan modal windows, dari segi pengaturan prostatnya, tetapi juga untuk instalasinya. Tetapi yang utama adalah fungsinya, yang tidak akan kalah dengan yang lain. Juga, secara default, itu dibuat di bawah naungan terang, di mana di sebelah kanan pojok atas tombol diatur, dalam bentuk salib.

Yang mana akan masuk ke fungsi disable atau hanya untuk menghilangkan frame, dimana bahkan pada elemen kecil ini ada efek merubah palet warna. Sekarang webmaster dapat meletakkannya di situs dan menempatkan deskripsi atau operator di dalamnya, yang dapat menampilkan berbagai kategori, seperti statistik atau informan.

Tetapi kenyataannya adalah, jika Anda memiliki gaya sumber daya yang gelap, maka dalam gaya tersebut Anda dapat dengan cepat mengubah skala, atau lebih tepatnya, menyesuaikannya dengan desain aslinya. Ini salah satunya metode standar bagaimana melakukan css murni ke jendela modal yang akan diluncurkan saat tombol diklik di bawah tautan dengan jangkar HTML. Tombol itu sendiri berfungsi lebih untuk visibilitas, di mana dalam gaya, menghapus satu kelas dan nama akan tetap ada, yang dapat diletakkan di navigasi atau di panel kontrol, di mana fungsi utama atau navigasi situs berada.

Ini adalah saat memeriksa apakah semuanya berfungsi dengan baik:

Memulai instalasi:

Jendela dengan tombol

CSS

Butksaton satokavate (
tampilan: blok sebaris;
dekorasi teks: tidak ada;
margin-kanan: 7px;
batas-radius: 5px;
bantalan: 7px 9px;
latar belakang: #199a36;
warna: # fbf7f7!penting;
}

Anelumen (
tampilan: fleksibel;
posisi: tetap;
kiri: 0;
atas: -100%;
lebar: 100%;
tinggi: 100%;
align-item: tengah;
justify-content: pusat;
opasitas: 0;
-webkit-transition: 0s .7s teratas, opacity .7s 0s;
transisi: 0s .7s teratas, opacity .7s 0s;
}

Anelumen: sasaran (
atas: 0;
opasitas: 1;
-webkit-transisi: tidak ada;
transisi: tidak ada;
}

Angka anelumen (
lebar: 100%;
lebar maks: 530 piksel;
posisi: relatif;
bantalan: 1.8em;
opasitas: 0;
latar belakang-warna: putih;
-webkit-transisi: opacity .7s;
transisi: opacity .7s;
}

Tokoh Anelumen.lowingnuska (
latar belakang: # f9f5f5;
batas-radius: 7px;
bantalan-atas: 8px;
perbatasan: 3px solid #aaabad;
}

Anelumen.lowingnuska angka h2 (
margin-atas: 0;
bantalan-bawah: 3px;
border-bottom: 1px solid # dcd7d7;
}

Anelumen: angka sasaran (
opasitas: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
dekorasi teks: tidak ada;
posisi: mutlak;
kanan: 8 piksel;
atas: 0 piksel;
ukuran font: 41px;
}

Anelumen .nedismiseg (
kiri: 0;
atas: 0;
lebar: 100%;
tinggi: 100%;
posisi: tetap;
warna latar: rgba (10, 10, 10, 0.87);
isi: "";
kursor: default;
visibilitas: tersembunyi;
-webkit-transisi: semua .7;
transisi: semua .7;
}

Anelumen: target .nedismiseg (
visibilitas: terlihat;
}

Perlu Anda ketahui juga bahwa CSS styling dan pseudo-class merupakan salah satu yang belum sepenuhnya dimanfaatkan oleh fitur CSS dengan banyak potensi aplikasi yang menarik.

Ini dimulai ketika Url halaman cocok dengan pengidentifikasi elemennya, atau Anda dapat menempatkannya secara berbeda, ini adalah saat pengguna melompat ke elemen tertentu di halaman.