Cum sa faci un buton pentru a închide și a ascunde elementul din pagina

Cum de a face butonul „Close“ pentru a ascunde elementul din pagina

Articolul descrie o soluții foarte simplu și convenabil de modul în care să adăugați un articol de pe site-ul cuvântul butonul „Close“ sau crucea-care permite vizitatorului să ascundă pagina sau închide elementul inutilă a unei anumite unități, făcând clic pe ea.






Punerea în aplicare se va trage doar câteva linii de cod, astfel încât modul de a face un site funcțional sau pe blog-ul destul de ușor, folosind CSS sau folosind jQuery. În funcție de opțiunea selectată, un buton pentru fiecare din blocul selectat pot fi adăugate manual prin editarea codului paginii independent sau software - folosind un script.

EXEMPLU
Pentru a desemna un buton, am folosit aici este imaginea în formă de cruce. poziționarea absolută în raport cu ansamblul principal. Exemplul general al HTML-design este după cum urmează:

Codul CSS relativă este după cum urmează:

afișare pop-block: inline-block;
Poziția: relativă; / * Trebuie sa fie specificate * /
lățime: 30%;
height: 300px; / * Înălțimea blocului de tipul * /
marja: 1%;
>
.afișare close-bloc: bloc;
Poziția: absolută;
sus: 8px;
dreapta: -8px;
lățime: 16px;
înălțime: 16px;
background-image: url (date: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAElBMVEXqAAD8oaH / DAI / RA3 / VR7 /// 91 + I / 7AAAAQklEQVR42oXPwQoAIAgD0JXu / 385FfTQgnYweKAp9pUXmE + swAFWAG8owQBTqjQQ8SQOcAdRQVtkqHy7dDFd / X / tAVqqAopyUfkOAAAAAElFTkSuQmCC);






cursor: pointer;
>
.pop-bloc p lățime: 100%;
înălțime: auto;
>

Opțiunea 1: „Close“ buton este doar pe CSS

Pentru a face să dispară, făcând clic pe elementul utilizând CSS, puteți utiliza formularul de tag-ul . Pentru acest cod de la unitatea principală va trebui să adăugați un nou câteva tag-uri:

Și pentru a completa CSS:

# Afișare pop-checkbox: nici unul;
>
# Pop-checkbox: verificat + vizibilitate .pop-bloc: ascuns; / * Pentru a părăsi locul - display: none; * /
>

Dacă pagina nu este un bloc pe care doriți să o ascundeți, atunci când se utilizează acest exemplu de realizare pentru fiecare tag-uri adăugate Trebuie să specificați un identificator unic și pentru a adăuga cod CSS pentru ea.

Opțiunea 2: add-cross automat buton de pe jQuery

În exemplul de butonul de închidere manual este setat doar la primul element, celelalte două, se adaugă în mod automat butonul de un script:

. $ (Function () $ ( '.pop-bloc') fiecare (funcția () var closeTrigger = $ (aceasta) .find ( 'close-bloc.') Lungime .;
în cazul în care (closeTrigger <1 ) $ (Aceasta) .append ( ' „);
> Întoarcere Else '';
>
. $ ( 'Închide-bloc') pe ( 'clic', funcția () $ (aceasta) .closest ( 'pop-bloc.') FadeOut (100) .;
>);
>);
>);

Algoritmul script este după cum urmează: toate aceste blocuri, pentru a inspecta pentru prezența în fiecare element cheie, dacă nu, se adaugă nimic de a face în cazul în care există. Făcând clic pe butonul pentru a ascunde blocul următor cu selectorul specificat.

Bună ziua, cred că un lucru foarte util, asigurați-vă că pentru a profita de, dar există câteva întrebări: este posibil ca cea de a lega un alt buton, dar cu adăugarea de (cum ar fi marcajele) nu știu cum să-l explice chiar, să spunem că utilizatorul a făcut clic pe „X“ așa cum am înțeles până când se vor curăța cookie-uri, este acest element nu va fi văzută de reintrare pe site-ul, este bun, dar puteți face acest lucru, care a fost un alt buton „+“ atunci cand este apasat, se adaugă materialul așa cum au fost, în pagina personală a utilizatorului pe site-ul, cu alte cuvinte face ceva cum ar fi Basket utilizator marcate Materiale Telem? Și a doua întrebare, modul de a face un meniu ca un sertar la stânga aveți pe site? Mulțumesc.