PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Niet achterelkaar kunnen klikken.

Door Mathieu Posthumus op 03-03-2014 12:15 gewijzigd op 03-03-2014 12:30
1.559 views
Hallo,

Ik heb nou dit( http://mathieup.freeiz.com/index.php )

als je dan op het login knopje drukt dan wil ik dus ervoor zorgen dat de overlay dus wat opacity heeft wil ik late infaden en outfaden wanneer je wegklikt.

ik dacht eerst aan dit.

var docHeight = $(document).height()
$(document).ready(function(){
	$("a.login").click(function(){
		$(function() {
			$("body").fadeIn("<div id='overlay'></div>");
			$("#overlay")
			.height(docHeight)
			.css({
				'opacity' : 0.4,
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'background-color': 'black',
				'width': '100%',
				'z-index': 99
			});
		});
		$(".login_box").slideToggle("slow");
	});
		$("#container").mouseup(function (e){
			if (!$('.login_box').is(e.target) &&
				$('.login_box').has(e.target).length === 0)  {
					$('.login_box').slideUp("slow");
					$("#overlay").fadeOut("style");
				}
			});
});


S
Snelle Jaap
03-03-2014 13:19
De overlay? Je bedoelt de achtergrond van de website? En het login knopje is dat poppetje zeker?
Mich
03-03-2014 13:31
Overlay is geen achtergrond maar een (meestal transparante) laag die over je website heen ligt waar daar bovenop informatie wordt weergegeven.

Toevoeging op 03/03/2014 13:35:50:

$("#overlay").fadeOut("style");

De functie RemoveAttr is er juist voor bedoelt om 'style' te verwijderen (dus de opmaak/css). Je kunt deze niet vervangen door fadeOut.
$("#overlay").fadeOut("slow"); zou misschien wel werken, maar de style blijft dan wel staan.
Het is handig om in de documentatie van jQuery de functies te bekijken, wat ze nou eigenlijk doen, voordat je ze aanpast.
S
Snelle Jaap
03-03-2014 13:37
Waaronder de informatie wordt weergeven bedoel je? Anders heeft de transparantie toch geen zin, als er elementen boven staan.
Mich
03-03-2014 13:40
Om het script van Mathieu als voorbeeld te nemen, zal het scherm om in te loggen boven de overlay worden weergegeven en de rest eronder. Zoiets als lightbox waarneer je op een foto klikt.
S
Snelle Jaap
03-03-2014 13:41
Ah zo bedoel je, ik snap hem.
Mathieu Posthumus
03-03-2014 13:50
Snelle Jaap op 03/03/2014 13:19:09

De overlay? Je bedoelt de achtergrond van de website? En het login knopje is dat poppetje zeker?


ja dat is hem

Toevoeging op 03/03/2014 13:54:56:

En wat ik vergeten ben op neer te zetten daar gaat de topic namelijk over xD

Dat als je dus op de knop drukt dat je de overlay en box tevoorschijn krijg en dat als je dan op de overlay klikt dat het weg gaat maar dat als je heel vaak op de login knop drukt dat het dan niet zovaak opnieuw gaat.
want ik zou niet eens weten wat ik daarvoor op moet zoeken.
Mich
03-03-2014 14:00
Om te voorkomen dat een functie vaak wordt herhaalt kun je stop() toevoegen.
Zie ook aangepast voorbeeld. Helemaal voorkomen kun je het niet.
Mich
03-03-2014 14:11
Dat lijkt inderdaad op de stop() functie
Mathieu Posthumus
03-03-2014 14:35
maar wat je nu hebt is als je er vaker op klikt dat ie klein wordt ofz.... vet raar.

Reageren

Inloggen om te reageren