Hogyan készítsünk egy gombot, hogy bezárja, és elrejti az elemet az oldalt

Hogyan lehet a „Close” gombra, hogy elrejtse az elemet az oldalt

A cikk bemutatja egy nagyon egyszerű és kényelmes megoldást arra, hogyan adhat egy elemet az oldalon a „Close” gombra, vagy a határon, amely lehetővé teszi a látogató, hogy elrejtse az oldalról, vagy zárja be a felesleges elem egy bizonyos egység, egyszerűen kattintson rá.






Végrehajtás húzza csak néhány sornyi kódot, így hogyan lehet egy működőképes webhely vagy blog elég könnyen CSS vagy a jQuery. Attól függően, hogy a választott opció egy gombot az egyes kiválasztott blokk adhatunk kézzel az oldal szerkesztésekor független kód, vagy a szoftver - szkript használatával.

példa
Ahhoz, hogy kijelöl egy gombot, szoktam itt a képen az a kereszt alakban. abszolút pozicionálás képest a fő szerelvény. Általános példa HTML-design a következő:

Relatív CSS kód a következő:

pop-block display: inline-block;
helyzet: a relatív; / * Meg kell adni * /
szélesség: 30%;
magasság: 300px; / * Magassága a blokk * /
árrés: 1%;
>
.közel-blokk display: block;
pozíció: abszolút;
top: 8 képpont;
jobbra: -8px;
szélesség: 16px;
magasság: 16px;
background-image: url (adatok: image / png; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAElBMVEXqAAD8oaH / AAD / RA3 / VR7 /// 91 + I / 7AAAAQklEQVR42oXPwQoAIAgD0JXu / 385FfTQgnYweKAp9pUXmE + swAFWAG8owQBTqjQQ8SQOcAdRQVtkqHy7dDFd / X / tAVqqAopyUfkOAAAAAElFTkSuQmCC);






kurzor: pointer;
>
.pop-blokk p szélesség: 100%;
magasság: auto;
>

1. lehetőség: „Close” gomb csak CSS

Ahhoz, hogy eltűnnek kattintva az elem CSS használatával, akkor a form tag . Ezt a kódot a fő egység kell hozzá néhány új címkék:

És, hogy kiegészítse a CSS:

# Pop-négyzetet display: none;
>
# Pop-oszlopokban ellenőrzött + .pop blokk visibility: hidden; / * Hogy hagyják el a helyet - a display: none; * /
>

Ha az oldal nem egy blokk, amely az elrejteni kívánt, ha ezzel a kiviteli minden hozzáadott címkék Meg kell adnia egy egyedi azonosító és a hozzá CSS-kódja.

2. lehetőség: Automatikusan add-kereszt gombot jQuery

A példában kézi zárás gomb beállítása csak az első elem, a másik kettő, a gomb automatikusan hozzáadódik egy script:

. $ (Function () $ ( '.pop-block') az egyes (függvény () var closeTrigger = $ (e) .find ( 'közeli blokk.') Hossza .;
if (closeTrigger <1 ) $ (This) .append ( „);
> Else return '';
>
. $ ( '. Close-block) a ( 'click', function () $ (this) .closest (pop-blokkban.) FadeOut (100) .;
>);
>);
>);

script algoritmus a következő: az összes ezeket a blokkokat, hogy ellenőrizze a jelenlétét az egyes kulcsfontosságú, ha nem, akkor semmit nem kell tenni, ha van. Ha rákattint a gombra, hogy elrejtse a következő blokk a megadott választó.

Szia, azt hiszem, egy nagyon hasznos dolog, biztos, hogy kihasználják, de van egy pár kérdést: lehetséges, mint kötni egy másik gombot, de azzal a kiegészítéssel, (például könyvjelzőket) nem tudja, hogyan kell még elmagyarázni, mondjuk a felhasználó kattintott az „X” ha jól értem, amíg nem lesz tiszta cookie-kat, akkor ez az elem nem látott újra belép a helyén, jó, de megteheti, hogy volt egy „+” gombot, amikor rákattint az anyagot adunk mintha, a felhasználó személyes oldal a helyszínen, más szóval nem valami mint kosár Felhasználó A jelölt Télem anyagok? És a második kérdésre, hogy hogyan lehet a menü, mint egy fiók balra van az oldalon? Köszönöm.