Mégis, az utóbbi cikkben volt talán a hátránya az, hogy nehéz volt csatlakozni számos formája, nevezetesen a forgatókönyvet kellene megismételni, hogy kezeli a forma, ami nem túl szép. Ebben a cikkben, és a fix, hogy ebben az időben. Ezen túlmenően, a forma nélkül is működni fog a modális ablakot.
Ja, és tettem annak érdekében, aydishniki és osztályok könnyebb megérteni, hogy mit és miért. Változás formatervezés, ezért érdekes. Egy későbbi cikkben, lehet csatlakozni ebben a formában reCapthsa a Google, és létrehozott egy célt, „esemény”, a siker, így készül egy cikksorozatot.
Hogyan készítsünk egy űrlapot egy modális ablak
Vágjunk bele. Mivel a modális ablak neve jQuery Remodal plugin. zárás előtt
csatlakozni magát, és Remodal jQuery plugin. Az alábbiakban adunk hozzá egy script, hogy lesz felelős Az űrlap elküldése nélkül betölteni az oldalt. Úgy néz ki, az alábbiak szerint:
Megjegyzés az elérési utat a fájlokat. Úgy döntöttem, hogy szinte az összes fájlt a mappában modalform könnyebb csatlakozni a projekthez.
Mielőtt rátérnénk a forma elrendezés, csatlakoztassa CSS fájlok modális ablakot. Csinálom a címkék közé fej:
Ahhoz, hogy ez sokkal érdekesebb:
Szóval, most az elrendezés maga a forma, és hív meg egy gombot. Kezdjük meg a gombot.
Bár a kódot, első pillantásra, elég sok, valójában nem olyan nehéz. Az egész forma csomagolva egy div class c remodal. Ez egy adat-remodal-id azonos beállításokkal, mint a gombot. Ez firstForm. Köszönet nekik, ha rákattint a gomb megnyitja a kívánt ablakot, ha a pár oldalt.
Bent a nagyon formában fieldset (ek). Fontos figyelni, hogy a bekezdésben a „mem” osztályú. Ez itt is megjelenik az üzenet küldése sikeres vagy sikertelen. Korábban üzenet jelenik meg közvetlenül a forma belsejében helyett az összes tartalmat a belsejében.
Egy másik pont. A rejtett mező class c formInfo. Meg kell különböztetni a kérelmet, és megérteni, hogy milyen alakja töltötte be a felhasználó, ha több különböző is. Egyszerűen töltse ki a kívánt szöveget érték érték.
A cikk végén, megmutatom, hogyan kell megtenni, hogy okoz egy ablak a különböző helyeken a helyszínen, és megérteni, hogy milyen gombra kattintás.
Most nézzük meg egy script, ami segít nekünk küldeni a forma nélkül betölteni az oldalt. Hívtam form.js:
A forgatókönyvet, azt mondjuk, hogy abban az időben a kijelzőn megjelenő üzenetek sikeres vagy sikertelen küldés, hide header. A 3 másodpercig visszatér minden a helyén, és tisztítsa meg a űrlapmezőket az üzenetet.
Fájl hogy elküldi az adatokat - mail.php. Itt a kód:
Számos vizsgálat:
Ez a módszer a POST adatokat, és ha igen, ellenőrizze, hogy a kulcs nem üres mező, ha nem, írjon a változó és küldeni.
Ha az adatok nem érte el a POST, dobott a hazai (azaz a felhasználó valahogy kaptam közvetlenül mail.php oldal), és nem kell, hiszen akkor küldjön egy üres e-mailt.
Ebben az első rész vége.
Ne felejtsük el megemlíteni a postaládákba. By the way, mail.ru betűket nem jön az ip. Nos, jobb, és az IE felhasználók mail.ru kell szenvedni.
És írni egy kis script, hogy ha rákattint a gombra, (link) lesz helyette egy rejtett mező információt a neve:
Azaz, azt mondjuk, hogy ha rákattint egy elemre az osztály linkButton, hogy a szöveget a címét és helyét a bemenet a name paraméter formInfo, ahol:
linkButton - az osztály a gomb;
formInfo - rejtett mező nevét értéket;
Ez nagyon kényelmes, ha Landing szerint készül, hogy milyen típusú online áruház, és több termék. Ehhez számos formáját, csak kérni a címet gombra, és könnyű kideríteni, hogy milyen termék vagy szolgáltatás felhasználói arány lefoglalva.
Ha van vylazit hiba „nem található”, először ellenőrizze a fájl elérési útját a mail.php form.js