Nie wyskakuje mi pole tekstowe po kliknięciu na "Logowanie"

pytanie zadane 3 czerwca 2015 w JavaScript przez Krzysiek_34 Mądrala (6,110 p.)
edycja 3 czerwca 2015 przez Arkadiusz Waluk

W menu na górze mam przycisk "Logowanie".
Chciałbym, aby po kliknięciu na to "Logowanie"
wyskoczyło mi pod tym przyciskiem pole tekstowe
z nazwą użytkownika i hasłem.

                      [Logowanie] <--- przycisk
           ______________________
           I Nazwa użytkownika:      I
           I [                         ]         I
           I                                      I <--- po kliknięciu na "Logowanie"
           I Hasło:                           I      ma wyskoczyć pole tekstowe,
           I [                         ]         I       na którym będę umieszczał info.
           I                                      I
           I [Zaloguj]                        I
           I______________________I

Próbowałem różnymi sposobami i nie ma efektu.
Jak to zrobić?

 <head>
	<meta charset="utf-8" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
		
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script type="text/javascript" src="logowanie.js"></script>
</head>

<div id="menu">
	<div class="option">Logowanie</div>
		<li>
			<div class="pole_tekstowe">
				<form>
					<label for="username">Nazwa użytkownika:</label>
					<input type="text" id="username" name="username">
					<label for="password">Hasło:</label>
					<input type="password" id="password" name="password">
				</form>
			</div>
		</li>
</div>



Kod CSS:

.pole_tekstowe
{
	display: none;
	width: 325px;
	height: 180px;
	background: #008000;
	font-size: 11px;
	position: relative;
	z-index: 9999;
	left: 105%;
}

li:active>.pole_tekstowe
{
	display: block;
}

form
{
margin: 0;
}

Plik o nazwie "logowanie.js"

$(document).ready(function(){
	$("#pole_tekstowe").click(function(){
		$(this).method();
	});

Ile można zakładać pytań w jednej sprawie i to już któryś raz z rzędu!? Wklejaj cały kod jaki chcesz pokazać w jedno pytanie - przecież to nawet nie wygodnie temu kto czyta i chce Ci pomóc, że musi latać i szukać kodu po kilku pytaniach.

3 odpowiedzi

odpowiedź 3 czerwca 2015 przez Comandeer Guru (601,930 p.)

W jQuery choćby: http://api.jquery.com/toggle

W CSS: http://roberto.ovh.org/html-css/css_lightbox.html lub http://roberto.ovh.org/html-css/css_lightbox_2.html

Pokaż 10 poprzednich komentarzy

komentarz 3 czerwca 2015 przez Krzysiek_34 Mądrala (6,110 p.)

Wszystko teraz działa elegancko.

Wielkie dzięki, Comandeer.

komentarz 3 czerwca 2015 przez Krzysiek_34 Mądrala (6,110 p.)

Chodzi mi jeszcze o taki drobny szczegół.

Gdy klikam na "Logowanie" to super, że wyskakuje pole tekstowe.

Ale gdy klikam następnie na "Kontakt", to super, że

wyskakuje pole tekstowe, ale w tej sytuacji te oba pola tekstowe

nakładają się na siebie.

Jak zrobić, aby np. najpierw po kliknięciu "Logowanie" i następnie na

"Kontakt", te oba pola tekstowe nie nakładały się na siebie?

Chodzi mi o blokadę, aby po kliknięciu np. na "Logowanie" z polem

tekstowym, nie było możliwości wyświetlić pola tekstowego z "Kontakt".

Jest przeznaczony jakiś atrybut w HTML, CSS albo w jQuery do tego celu?

komentarz 3 czerwca 2015 przez Comandeer Guru (601,930 p.)

No po prostu ukrywać jedno przy pokazywaniu drugiego

komentarz 3 czerwca 2015 przez Krzysiek_34 Mądrala (6,110 p.)

Tylko jak tego dokonać w praktyce, aby pola tekstowe nie nakładały się na siebie?

Na niektórych stronach internetowych pola tekstowe nie nakladają się na siebie,

zatem musi być jakiś sposób na to, jakiś atrybut musi za to odpowiadać.

W praktyce ma to wyglądać tak, aby po kliknięciu, np. na "Kontakt" z polem tekstowym,

była nałożona blokada na przycisk "Logowanie".

komentarz 3 czerwca 2015 przez Comandeer Guru (601,930 p.)

No to wystarczy sprawdzić czy inne okienko nie ma niezerowej wysokości i tyle. Jak ma, to znaczy, że jest otwarte i drugie nie powinno być.

odpowiedź 3 czerwca 2015 przez Krzysiek_34 Mądrala (6,110 p.)

OK.

Wcześniej jeden z użytkowników miał do mnie pretensje, że w samym kodzie HTML i CSS umieszczam nie tylko kod, ale też treść wypowiedzi albo pytanie.

Mimo to, będę teraz umieszczał treść wypowiedzi i pytanie w jednym kodzie.

komentarz 3 czerwca 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

Być może umieściłeś treść pytania w znaczniku code przeznaczonym tylko na kod i dlatego zwrócił ktoś na to uwagę. Najpierw wpisuj normalnie treść pytania a dopiero później w znacznik code wstaw kod z którym masz problem i na pewno nikt się wtedy nie będzie niczego czepiał ;)