Hogy legyen már a sok elmélet között valami gyakorlat is. A pop-up ablakokat ugyan mindenki utálja, de kétségtelenül működnek, és nagyon megdobhatják a feliratkozók számát. Mivel a készítésük sokaknak gondot okoz, ezért most jöjjön egy lehetséges módszer az elkészítéséhez.
Az alábbi írás html kódokat is fog tartalmazni. A kódoknál vastag betűvel tüntettem fel azokat a változókat, amiknek a nevét neked kell megadnod. A bejegyzés végén látsz egy példatárat, hogy ezek a változók például milyen értéket vehetnek fel.
Tehát a Pop-Up készítés lépései:
ELSŐ LÉPÉS: Készíts egy képet, ami a popup ablakod lesz. Így fog kinézni a popup. A Háztartási Tippek oldalon ez a kép például a 3 összetűzött jegyzetlap, plusz a rajta lévő szövegek és az ajándék termék képe. A feladat elvégzéséhez javaslom a Photoshopot. Ha ez nincs meg, akkor az ingyenes Gimp jó választás lehet. Ennek menetébe most nem mennék bele, mert az egy másik bejegyzés lenne. Egyszerű popupok létrehozásához elvileg persze a Paint is elég lehet (ez a Windows rendszer része, ha az fut a gépeden).
Tipp: Ha nem értesz ezekhez, inkább keress valakit, aki meg tudja neked csinálni, mert a kezelésük megtanulása azért nem két perc!
MÁSODIK LÉPÉS: Vedd elő az oldaladat (mondjuk, hogy ez egy .html fájl), és nyisd meg egy szövegszerkesztőben. Javaslom a Jegyzettömböt, de ha valami komolyabb kódkiemelővel ellátott jegyzettömbprogramot szeretnél, akkor használd az ingyenes Notepad++ programot (magyarul is elérhető). Linuxon, BSD-n a Kate javasolt.
Tipp: A Notepad++ programot azért érdemes használni, mert kódkiemelés van benne, tehát pontosan látod, ha elfelejtettél lezárni egy taget, vagy egy sort, nem raktál ki valahová egy idézőjelet, stb. Ha nem értesz a HTML-hez semmilyen szinten, akkor kérj meg valakit, vagy kezdj el olvasni az alapokról.
HARMADIK LÉPÉS: Keresd meg a HEAD taget. Mit is jelent ez? Lesz a .html fájlban egy ilyen:
<head>
VALAMI
</head>
Hogy a HEAD tagek között mi lesz neked, azt nem tudom. Ne ijedj meg, ha az a valami nagyon, akár sok-sok sor hosszú, és először nem találod a </head> zárótaget. A lényeg az, hogy a head nyitótag <head> és a head zárótag </head> közé valahová illeszd be az alábbi kódot:
<script type="text/JavaScript">
<!--
function getStyle()
{
var temp = document.getElementById("VALTOZO_1").style.visibility;
return temp;
}
function switchMain()
{
var current = getStyle();
if( current == "visible" )
{
document.getElementById("VALTOZO_1").style.visibility = "hidden";
}
else
{
document.getElementById("VALTOZO_1").style.visibility = "visible";
}
}
//-->
</script>
Ne vegyél ki ebből semmit, még a comment részt sem, mert szükség van rá. Így nem jelenik meg valami randa hibaüzenet, ha egy régebbi böngészővel nézik az oldalad, amin valamiért a javascript nem működik normálisan. Ha nem tudod mi a comment rész, akkor meg főleg ne nyúlj hozzá. A "VÁLTOZÓ_1"-et természetesen írd át valamire, amire csak akarod, csak figyelj oda, hogy mindenhol, ahol "VALTOZO_1"-et látsz (a későbbiekben is), oda ugyanaz a szó kerüljön.
NEGYEDIK LÉPÉS: Keresd meg a BODY zárótaget a fájlban. Ez így néz ki: </body>. Tedd be elé a következő kódot:
<div id="VALTOZO_1" style="position:absolute; left:420px; top:40px; width:453px; height:525px; z-index:2; visibility: visible; background-image: url(VALTOZO_2); layer-background-image: url(VALTOZO_2);" align ="CENTER">
IDE JÖN AMIT A POP-UP ABLAKON MÉG FEL SZERETNÉL TŰNTETNI. HA NINCS SZÖVEG A HÁTTÉRKÉPEN, AKKOR IDE JÖN A SZÖVEG IS! PLUSZ IDE JÖHET A FELIRATKOZÓ ŰRLAP IS!
<a href="#" onclick="switchMain()">bezár x</a>
</div>
Láthatod, hogy ebben a kódban is van egy VALTOZO_1 ennek meg kell egyeznie azzal, amit az előző kódban is használtál nem véletlenül ugyanaz. A VALTOZO_2 a pop-up ablakod képének az elérési útvonala lesz.
ÖTÖDIK LÉPÉS: Írd át a változókat, hogy stimmeljenek. Milyen értékeket vehetnek fel a változók?
VALTOZO_1: lehet bármilyen karaktersor. Például: csali, feliratkozo, tanulmany, ebook, stb. Mindegy milyen szót adsz meg, csak arra figyelj, hogy mindenhol, ahol VALTOZO_1 szerepel, ott ugyanaz a karaktersor szerepeljen! Tehát ha az egyik helyen átírod a VALTOZO_1-et mondjuk "bela"-ra, akkor az összes helyen írd át.
VALTOZO_2: ezt mindenképpen át kell írnod, mert itt kell megadnod a pop-up ablakot ábrázoló képnek az elérési útvonalát és nevét a szervereden. Például, ha a kép neve "popup.gif", és azt webes gyökérkönyvtárból számítva a "kepek" könyvtárba tetted, akkor ezt kell írnod a helyére: kepek/popup.gif.
A pop-up elhelyezkedését "left:420px; top:40px; width:453px; height:525px" az ebben a részben megadott értékek átírásával tudod megváltoztatni. Ez azt jelenti, hogy a tetőtől 40, a bal széltől pedig 420 pixelre jelenítse meg a popupot 453 pixel szélesen és 525 pixel magasan. Ez utóbbi kettő érték természetesen a pop-upod képének a szélessége és a magassága. Játssz velük! Írd át az értékeket, és nézd meg mi történik, aztán helyezd el oda a popupodat, ahová te szeretnéd!
Ha a bezár gomb helyére szeretnél egy képet tenni, ahelyett, hogy egyszerűen csak egy "bezár x" felirat legyen, írd be a következőket (nem tudom, hogy működik-e, ezt már én találtam ki az alapján, hogy más oldalakat is megnéztem):
<a href="#" onclick="switchMain()"><img src="VALTOZO_3" width="15" height="15" alt="Bezár" border="0" style="vertical-align:middle; margin-left: 15px;"></a>
A VALTOZO_3 természetesen a bezárógomb képének lesz az elérési útvonala (pl.: kepek/bezar.gif). A width, és a height a kép szélességét és magasságát jelöli. Érdemes próbálgatni.
Tipp: Most, hogy látjátok a kód alapját, menjetek, és nézzétek meg, hogy ki hogyan csinálja a pop-up ablakot. Látogassatok el olyan oldalakra, ahol tudjátok, hogy van pop-up, és nézzétek meg a lap forráskódját. Firefox alatt CTRL+U, iExplorer esetén meg jobb gomb, és "View Source" forrás megtekintése (vagy hasonló, nekem nem magyarul van).
További olvasáshoz keressetek rá a "showModalDialog" módszerre.
Jó pop-up ablak generálást!