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.556 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
05-03-2014 13:40
De code die micheal gaf moet je neerzetten bij je andere jQuery code.
Mich
05-03-2014 14:05 gewijzigd op 05-03-2014 14:31
Ik ben voor je aan het kijken Mathieu.
Wat je nodig hebt ik fadeTo()
$("#overlay").fadeTo("slow", 0.5 )
En die css opacity regel kan dan weg.
In die mouseup function zou je dan weer $("#overlay").fadeOut("slow"); moeten gebruiken (removeAttr('style') is niet perse meer nodig)

Alleen die mouseup function werkt niet goed. Ben er even naar aan het kijken.


var docHeight = $(document).height();

$(document).ready(function(){
	$("a.login").click(function(){
			$("#overlay")
            .fadeTo("slow", 0.5 )
			.height(docHeight)
			.css({
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'background-color': 'black',
				'width': '100%',
				'z-index': 99
			});
		$(".login_box").slideDown("slow");
	});
  
  $("#overlay").click(function(){
      $('.login_box').slideUp("slow");
      $("#overlay").fadeOut("slow");
    });
});


edit: Opgelost door van document (jij had hier #container van gemaakt?) #overlay van te maken. Anders werd die code al uitgevoerd terwijl je op de link klikt. (Bovenstaande code aangepast)
fiddle

Kun je hiermee verder?

Edit: mouseup heeft nou weinig zin meer, dus deze kan er wel weer uit (aangepast in bovenstaande code).
Mich
05-03-2014 14:27
Welcome ;)

Toevoeging op 05/03/2014 14:32:50:

De mouseup functie heeft trouwens geen nut meer, dus die heb ik er nog even uitgehaald. Ook zat er een nutteloze functie in na de click functie. Aangepast in bovenstaande code.

Reageren

Inloggen om te reageren