Téma: Autoclose window HTML5

A következő probléma megoldásához kérném a segítségeteket:

Adott egy Lightboxban megnyíló form, minek kitöltése és elküldése után a Lightboxban egy köszönő oldal jelenik meg. Erre az oldalra keresnék egy HTML5 ill. böngészőkompatibilis kódot amivel 5-10mp után automatikusan bezárhatnám a Lightbox ablakot. Megoldható ez egyáltalán?

Köszönöm előre is a segítségeteket!

Ezeket külföldi oldalakon találtam:

Lightbox esetén:

Kód:

<script>
$(document).ready(function() {
   setTimeout( function() {window.parent.Lightbox.end();},5000);
});
</script>

Fancyboxnál.

Kód:

<script>
$(document).ready(function() {
   setTimeout( function() {$.fancybox.close(); },5000);
});
</script>

Nagyon köszönöm Oszti a segítséged! Bár ez még nem teljesen oldja meg a feladatot, hiszen ezt a szülő oldalra kellene beillesztenem, de onnan nem jó ha autmatikusan lezár x idő után, hiszen előbb ki kell tölteni és elküldeni a formot. Olyan kód kellene, amit a köszönő oldal html fájljába illeszthetek és önmagát zárja be.

Esetleg a fenti kód módosítva? Sajnos nem értek a javascripthez, így nem igazán tudom...

Valami ilyesmi kell talán. A kódot ne a lightbox felületre (vagy a form kódjába) illeszd be, hanem az oldalba amin megjelenhet a form.
A submitgomb megnyomására elpostolja a form1 adatait az adatbazis.php-nek. Visszaíródik az érték és 5 másodperc múlva bezárja a lightboxot.

Kód:

$(document).delegate("#submitgomb","click",function(e){
	$.ajax({
		url: "adatbazis.php",
		type: "post",
		data: $("#form1').serialize(),
		success: function(data) {
			$("#azegyikdiv').html(data);
			setTimeout( function() {window.parent.Lightbox.end();},5000);
		}
	});
});

@Atthys: rakd be pastebin-re vagy valahova a forráskódot, ami kezeli a lightboxot, és linkeld be. Úgy már egyszerű lesz, ha látjuk, hogy mit is csinál a kódod. A lényeg, hogy egy setTimeout-tal meg kell hívni valamekkora időeltolással a bezáró függvényét (az Oszti által is írt részből), na, azt kéne kikeresni, hogy micsoda. Szóval ha adsz kódot, adunk kódot.

Már adom is a kódot!

Pastebin

HTML5 Lightbox forrása

Közben megpróbálom Oszti verzióját...

Ehh, azt hittem van valami olvashatóbb verziója. Ebben nehéz kibogózni.
A másik megoldás hogy setTimeout-al csinálsz egy olyat, hogy a felhasználó helyett a kilépő gombra kattintasz. Az gyakorlatilag megoldja a gondot. Ezt ne haragudj, de nem próbáltam ki, de első ránézésre van egy "html5-close" id-jű div, amire kattintás esetén záródik be a dolog, így egy ilyet tudok elképzelni:

Kód:

setTimeout("$('#html5-close').click();", 5000);

Ezt oda, amit Oszti írt. Vagy megpróbálhatod még az ő verzióját, hátha működik.

A másik megoldás hogy setTimeout-al csinálsz egy olyat, hogy a felhasználó helyett a kilépő gombra kattintasz.

Ezzel megint csak az a gond hogy a js betöltődésekor előbb a form jön, azaz nem kellene visszaszámolnia és bezárnia, csak a form küldés után. Ezzel pedig a lightbox betöltődése után azonnal visszaszámolna és bezárna ugye?

Nagyon köszönöm a segítséget!

Atthys eredeti hozzászólása

Ezzel megint csak az a gond hogy a js betöltődésekor előbb a form jön, azaz nem kellene visszaszámolnia és bezárnia, csak a form küldés után. Ezzel pedig a lightbox betöltődése után azonnal visszaszámolna és bezárna ugye?

Nem, mivel ahgy írtam is, oda rakd ezt, amit Oszti is írt:

Emphus eredeti hozzászólása

Ezt oda, amit Oszti írt. Vagy megpróbálhatod még az ő verzióját, hátha működik.

oszti eredeti hozzászólása

Kód:

$(document).delegate("#submitgomb","click",function(e){
	$.ajax({
		url: "adatbazis.php",
		type: "post",
		data: $("#form1').serialize(),
		success: function(data) {
			$("#azegyikdiv').html(data);
			setTimeout( function() {window.parent.Lightbox.end();},5000);
		}
	});
});

Magyarán az ajax success részébe.

Én ezt a html5 lightbox-ot nem javaslom. A benne lévő 1.7.1-es jqueryvel viszonylag megy, az újabbakkal már be sem tölti az oldalakat. Az eredetivel meg ottmarad a loader. Szóval eléggé bugosnak tűnik.

Helyette talán ezek valamelyike is megteszi:
hxxp://okonet.ru/projects/modalbox/index.html
hxxp://jqueryui.com/dialog/#modal-form
hxxp://onehackoranother.com/projects/jquery/boxy/
hxxp://www.ericmmartin.com/projects/simplemodal-demos/