Bună tuturor, voi spune despre un lucru foarte confortabil, care se numește o fereastră modal, vom discuta despre modul de a face o fereastră modal. Mulți oameni nu înțeleg ce este, voi încerca să explice într-un limbaj simplu pentru tine, cu alte cuvinte - este o fereastră pop-up atunci când apăsați butonul sau text.
Un alt exemplu în cazul în care, de asemenea, am pus într-o cutie, codul banner și banner-ul în sine. pe pagina de program afiliat.
Luați în considerare fereastra modal în css, astfel încât să nu ia pentru o plimbare, vom folosi stiluri, care este, în principiu prescrie fișier stiluri și codul în fereastra noastră, uita-te la toate detaliile, ce si cum.
fereastra Modal pe css, modul de a face o fereastră modal
Primul lucru de care avem nevoie este un stil, copiați codul complet cu stiluri care mai jos și inserați-l în foaia de principală, și anume în style.css
Rezerva, puteți juca în jurul cu stiluri și de a face ceva frumos, schimbarea de fundal, de frontieră, o alta pentru a face și așa mai departe. Du-te la pagina în care doriți să aveți această fereastră pop-up, și inserați următorul cod:
Acum se stabilească în jos un pic în ea, trebuie să se schimbe. În cazul în care scris „Buton“ în cazul în care aveți posibilitatea să inserați ca o imagine de text Thai, face ceea ce vrei, adică, atunci când faceți clic pe ea se va deschide o fereastră. În cazul în care în scris, „Aici este conținutul ferestrei“ se introduce ceva ce ați dori să vedeți fereastra pop-up, asta e practic tot.
Al tău Eugene Smetskoy
Bună ziua Eugene! Exemplul plăcut simplitatea și calitatea acestuia. Dar există o întrebare. Pe pagina, există câteva imagini pentru creșterea ulterioară în fereastra modal. A se vedea o imagine mică (care trebuie să apăsați) plasate în zona: a href = „#ModalOpen“ title = „“ rel = „nofollow“> imaginea unui mic 1 O mare imagine care ar trebui să apară în fereastra de model este plasat în acest bloc: href = "# Închideți" title = "Close" rel = "nofollow"> X mai multe fotografii 1 Această parte funcționează bine! Large Image 1 (denumită în continuare BI №1) este afișat într-o perfectă cutie modal! Dar toate imaginile ulterioare de pe pagina, când faceți clic, de afișare într-o fereastră modal din nou BI №1, în loc de cele de mai sus pentru mapările BI №2, №3 BI etc. „Imaginile mici“ sunt afișate după cum este necesar - toate diferite. Intrebare pentru tine Eugene, dacă este cum să o rezolvi ceva, poate am trecut cu vederea undeva și să facă greșeli. În general, dacă este posibil să se facă acest exemplu, la pagina 10-20 de imagini care va fi afișat într-o fereastră modal în exemplul dumneavoastră? Aș fi foarte recunoscător pentru răspunsul!
În cazul meu, fiecare imagine este un desen de ansamblu a produsului. Astfel de produse pe pagină vor fi de aproximativ 30. Inteles, trebuie să alocați fiecare fereastră ID-ul, și anume în cazul în care: a href = "# ModalOpen", apoi: div id = "ModalOpen" Mai mult, în cazul în care: a href = "# ModalOpen1", apoi: div id = "ModalOpen1" etc. Sa dovedit doar bomba!
Deci rece: zâmbet:
Am niște poze - le-am făcut butoane. Făcând clic pe imagine ar trebui să deschidă cutia modulară cu informațiile corecte (propriile informații pentru fiecare buton). Cum pot obține informații diferite în fiecare fereastră deschisă? Până în prezent, pentru diferitele imagini din fereastra se deschide același text.