Selamat siang Nama saya Boris Cherepanov, saya mengembangkan situs web di wordpress dan bitrix. Saya mengerjakan proyek di sini. Salah satu batasannya adalah tidak menggunakan jquery, tetapi saya harus memanggil jendela modal yang sama dari tombol yang berbeda. Sebenarnya, ini adalah tugas yang cukup sederhana, tetapi saya memutuskan untuk melanjutkan dan membuat jendela modal yang akan dibuat pada klik pertama, simpan statusnya, memiliki konstruktor untuk dihubungi, dll. Dan pada akhirnya, saya tidak menyesalinya. Saya akan jelaskan mengapa nanti. Saya “membungkus” jendela modal ini menjadi solusi turnkey yang dapat digunakan terus-menerus.
Instalasi
Menginstal "modal" semacam itu sederhana. Unduh file js dan hubungkan. Itu tidak tergantung pada acara atau pustaka, sehingga Anda dapat terhubung di mana Anda membutuhkannya. Inilah
tautan di githubInisialisasi
Pada halaman di mana Anda perlu menelepon Anda menulis di js:
new XMC({ bodyID: 'body', backgroundLayerID: 'wrapper', selector: 'data-type', selectorValue: 'openModalForm', btnId: 'mfClose', content: '', classListBg: ['zuzu', 'zaza'], classListBody: ['zuzu', 'zaza2'], classListBtn: ['zuzu', 'zaza3'], styleBg: { top: '0', left:'0', right: '0', bottom: '0', position: 'fixed', background: '#00000090', justifyContent: 'center', alignItems: 'center', zIndex: '6' }, styleBody: { minWidth: '200px', minHeight: '200px', background: '#ffffff', justifyContent: 'center', alignItems: 'center', }, btnStyle: { width: '40px', height: "40px", background: '#ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'absolute', top: '5%', right: '5%', cursor: 'pointer' } });
Lebih lanjut tentang item dalam suatu objek
Ada 6 poin yang dibutuhkan:
- bodyID adalah pengidentifikasi blok yang akan berisi konten dari modal window
- backgroundLayerID - id lapisan peredupan
- selector - atribut html yang ada di semua tombol yang akan menyebabkan jendela modal
- selectorValue - nilai selector
- bntID - id tombol untuk menutup jendela modal
- konten - teks atau html di dalam jendela modal
Poin opsional, tetapi sangat penting:
- classListBg, classListBody, classListBtn - array kelas untuk lapisan peredupan, jendela utama dan tombol tutup, masing-masing
- styleBg, styleBody, btnStyle - objek dengan gaya lapisan peredupan, jendela utama dan tombol tutup, masing-masing
Sedikit tentang modal window itu sendiri
Saya telah mengatakan bahwa tugas utama yang diselesaikan oleh jendela modal ini adalah panggilan dari beberapa tombol. Mengklik pada beberapa tombol untuk memanggil js adalah contoh khas dari delegasi dan di XMC (seperti yang saya sebut jendela modal saya) diterapkan seperti ini:
XMC.prototype.delegateClick = function () { var mf = this; window.addEventListener('click', function () {
Dengan demikian, dalam konstruktor Anda perlu mendaftar:
var XMC = function (object) { this.delegateClick(); }
Ngomong-ngomong, pada suatu waktu, sebuah artikel dengan
javascript belajar membantu saya menangani hal ini. Membiasakan diri dengan itu akan bermanfaat.
AJAX untuk formulir
Dalam "kasus" saya, saya perlu memuat formulir menggunakan ajax (tugas ini muncul dalam proses). Berkat pendekatan awal saya, saya berhasil menghemat sedikit waktu. Saya memperluas melalui prototipe.
XMC.prototype.ajax = function () { var mf = this; var data = new Object();
Saya memiliki kode permintaan untuk CMS Wordpress.
Ringkasan
Akibatnya, berkat pendekatan objek, saya berhasil membuat tidak hanya pop-up, tetapi hampir sebuah aplikasi web di mana saya memiliki 2 ajax untuk menerima formulir dan mengirimkan, terjemahan khusus browser, membaca cookie, memuat animasi. Berkat ini, saya tidak perlu mencari elemen baru oleh berbagai pemilih untuk menerjemahkan atau bekerja dengan data dari formulir yang "tiba" oleh ajax.
Saya harap Anda menemukan artikel saya bermanfaat. Semoga beruntung