Skocz do zawartości

Panel logowania


barni123

Recommended Posts

Witam

zrobiłem sobie fajny panel logowania w css ale nie chce umieszczać całego tego formularza na stronie bo zajmie mi to dużo miejsca.Chcę żeby po naciśnięciu (nie najechaniu)wyrazu Logowanie który znajduje się w nagłówku strony wyświetlił mi się okinko do zalogowania i gdy kliknę myszką w innym miejscu na stronie niż na ten panel

to okienko zniknie.

Proszę o pomoc

Link do komentarza
Udostępnij na innych stronach

Przetestuj sobie poniższy kod. Działa jak opisałeś, po kliknięciu w link pokazuje diva, a ukrywa go jeżeli kliknie się w inne miejsce na stronie.

<html>
<head>
<title>...</title>
<script type="text/javascript">
var now = false;

function show(id, event)
{
hide();
document.getElementById(id).style.display = 'block';
now = id;
event.stopPropagation();
}

var tag;

function hide()
{
	if(now)
	{
	document.getElementById(now).style.display = 'none';
	}
}
</script>
</head>
<body onclick="hide();">
<div onclick="event.stopPropagation();" id="jeden" style="width: 50%; height: 50%; border: 1px solid black; display: none;">fdf1</div>
<div onclick="event.stopPropagation();" id="dwa" style="width: 50%; height: 50%; border: 1px solid black; display: none;">fdf2</div>
<div onclick="event.stopPropagation();" id="trzy" style="width: 50%; height: 50%; border: 1px solid black; display: none;">fdf33</div>

<br />
<a href="#null" onclick="show('jeden', event);">jeden</a><br />

<a href="#null" onclick="show('dwa', event);">dwa</a><br />
<a href="#null" onclick="show('trzy', event);">trzy</a><br />
</body>
</html>

Kod pochodzi z forum php.pl

  • Upvote 1
Link do komentarza
Udostępnij na innych stronach

Dzięki wielkie zrobiłeś to tak jak chciałem ale jak jeszcze zrobić żeby okinko chowało się nie tylko jak klikam poza jego obszar ale także jak klikam na tego linka ?

Możesz stworzyć link "zamknij" i przypisać mu wartość: onclick="hide();"

  • Upvote 1
Link do komentarza
Udostępnij na innych stronach

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś treść z formatowaniem.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Wczytywanie...
×
×
  • Utwórz nowe...