Vytvořte si pop-up formulář

Často se setkávám s dotazníky, kde je třeba vyplnit datum. Po kliku na kolonku mi vyskočí hezký kalendář a nemusím nic na klávesnici psát. Pohodlně vše vyberu myší. Tuto funkci využijete tedy v mnoha případech.

Formulář se skládá ze dvou souborů.
První soubor je hlavní formulář, tedy takový dotazník. Kód je následující:




<html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hlavní formulář</title></head><body>
<script type="text/javascript">function okno() { definice_okna = window.open("", "otevri_mapu", 'width=500, height=800, top=100, left=100, toolbar=0, location=0, scrollbars=0, resizable=0'); definice_okna.focus();}</script>
<form name="form" action=""><input type="text" name="vysledek" id="vysledek" value="žádná mapa"/><a href="dvojka.html" onclick='okno();' target="otevri_mapu">Vytvořit</a></form>
</body></html>

Javascript pro otevření okna slouží k pohodlnému zobrazení pop-upu. Definujete velikost, pozici, posuvníky. Vše, co je třeba. Samotný formulář už můžete odesílat kamkoliv, toto je osekaná ukázka.

Druhý soubor je už náš pop-up, ve kterém bude probíhat další dějiství. V našem případě odesíláme už předem získanou hodnotu inputu. K hodnotě můžeme dojít výše ve formuláři, či výpisem dat z databáze. Po odeslání se okno zavře a data se vyplní v prvním souboru.




<html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Pop-up</title></head><body><form name="form2">
<input type="text" name="data" id="data" value="testovaci text"/>
</form><a href="JavaScript:close();" title="Dokončit" onClick="window.opener.document.form.vysledek.value=window.document.form2.data.value;">Dokončit</a>
</body></html>

Funkční demo naleznete zde

Soubory ke stažení

Autor článku je Landsman, vydáno 29/6/2011, přečteno 495x

Provozujeme také VášZrak.cz a DesignFLOW.cz

PODKLADY ZDE: http://www.smetka.net/upload/Landsman/js.zip