Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][JavaScript]wyskakujace okno z podaniem hasla
Forum PHP.pl > Forum > Przedszkole
wytrazek89
22.11.2012, 20:02:18
Witam mam oto taki kod (lekko po przeróbkach juz)
[HTML] pobierz, plaintext 
  1. <html><head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. <title>Login Modal Dialog Window with CSS and jQuery</title>
  4. <style type="text/css">
  5. body{
  6. 	 background:#202020;
  7. 	 font:bold 12px Arial, Helvetica, sans-serif;
  8. 	 margin:0;
  9. 	 padding:0;
  10. 	 min-width:960px;
  11. 	 color:#bbbbbb; 
  12. }
  13.  
  14.  
  15.  
  16.  
  17.  
  18. .container {width: 960px; margin: 0 auto; overflow: hidden;}
  19.  
  20. #content {	float: left; width: 100%;}
  21.  
  22. .post { margin: 0 auto; padding-bottom: 50px; float: left; width: 960px; }
  23.  
  24.  
  25.  
  26. .btn-sign a { color:#fff; text-shadow:0 1px 2px #161616; }
  27.  
  28. #mask {
  29. 	display: none;
  30. 	background: #000; 
  31. 	position: fixed; left: 0; top: 0; 
  32. 	z-index: 10;
  33. 	width: 100%; height: 100%;
  34. 	opacity: 0.8;
  35. 	z-index: 999;
  36. }
  37.  
  38. .login-popup{
  39. 	display:none;
  40. 	background: #333;
  41. 	padding: 10px; 	
  42. 	border: 2px solid #ddd;
  43. 	float: left;
  44. 	font-size: 1.2em;
  45. 	position: fixed;
  46. 	top: 50%; left: 50%;
  47. 	z-index: 99999;
  48. 	box-shadow: 0px 0px 20px #999;
  49. 	-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
  50.     -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
  51. 	border-radius:3px 3px 3px 3px;
  52.     -moz-border-radius: 3px; /* Firefox */
  53.     -webkit-border-radius: 3px; /* Safari, Chrome */
  54. }
  55.  
  56. img.btn_close {
  57. 	float: right; 
  58. 	margin: -28px -28px 0 0;
  59. }
  60.  
  61. fieldset { 
  62. 	border:none; 
  63. }
  64.  
  65. form.signin .textbox label { 
  66. 	display:block; 
  67. 	padding-bottom:7px; 
  68. }
  69.  
  70. form.signin .textbox span { 
  71. 	display:block;
  72. }
  73.  
  74. form.signin p, form.signin span { 
  75. 	color:#999; 
  76. 	font-size:11px; 
  77. 	line-height:18px;
  78. } 
  79.  
  80. form.signin .textbox input { 
  81. 	background:#666666; 
  82. 	border-bottom:1px solid #333;
  83. 	border-left:1px solid #000;
  84. 	border-right:1px solid #333;
  85. 	border-top:1px solid #000;
  86. 	color:#fff; 
  87. 	border-radius: 3px 3px 3px 3px;
  88. 	-moz-border-radius: 3px;
  89.     -webkit-border-radius: 3px;
  90. 	font:13px Arial, Helvetica, sans-serif;
  91. 	padding:6px 6px 4px;
  92. 	width:200px;
  93. }
  94.  
  95. form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
  96. form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000;  }
  97.  
  98. .button { 
  99. 	background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
  100. 	background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
  101. 	background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
  102.     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
  103. 	border-color:#000; 
  104. 	border-width:1px;
  105. 	border-radius:4px 4px 4px 4px;
  106. 	-moz-border-radius: 4px;
  107.     -webkit-border-radius: 4px;
  108. 	color:#333;
  109. 	cursor:pointer;
  110. 	display:inline-block;
  111. 	padding:6px 6px 4px;
  112. 	margin-top:10px;
  113. 	font:12px; 
  114. 	width:214px;
  115. }
  116.  
  117. .button:hover { background:#ddd; }
  118.  
  119. </style>
  120. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  121. <script type="text/javascript">
  122. $(document).ready(function() {
  123. 	$('a.login-window').click(function() {
  124.  
  125. 		// Getting the variable's value from a link 
  126. 		var loginBox = $(this).attr('href');
  127.  
  128. 		//Fade in the Popup and add close button
  129. 		$(loginBox).fadeIn(300);
  130.  
  131. 		//Set the center alignment padding + border
  132. 		var popMargTop = ($(loginBox).height() + 24) / 2; 
  133. 		var popMargLeft = ($(loginBox).width() + 24) / 2; 
  134.  
  135. 		$(loginBox).css({ 
  136. 			'margin-top' : -popMargTop,
  137. 			'margin-left' : -popMargLeft
  138. 		});
  139.  
  140. 		// Add the mask to body
  141. 		$('body').append('<div id="mask"></div>');
  142. 		$('#mask').fadeIn(300);
  143.  
  144.  
  145. 		return false;
  146. 	});
  147. 	// When clicking on the button close or the mask layer the popup closed
  148. 	$('a.close, ').live('click', function() { 
  149. 	  $('#mask , .login-popup').fadeOut(300 , function() {
  150. 		$('#mask').remove();  
  151. 	}); 
  152. 	return false;
  153. 	});
  154.  
  155. });
  156. </script>
  157. <link rel="canonical" href="http://www.alessioatzeni.com/wp-content/tutorials/jquery/login-box-modal-dialog-window/index.html">
  158. </head>
  159. <body>
  160.  
  161. 		</div>
  162.  
  163.  
  164.         <div style="display: block; margin-top: -113px; margin-left: -130px;" id="login-box" class="login-popup">
  165.         <a href="#" class="close"><img src="http://serwer0.3te.pl/Pliki_na_strone/obrazki/close_pop.png" class="btn_close" title="Zamknij Okienko" alt="Zamknij Okienko"></a>
  166.           <form method="post" class="signin" action="#">
  167.                 <fieldset class="textbox">
  168.  
  169.  
  170.  
  171.                 <label class="password">
  172.                 <span><font color=gold size=3>Podaj Hasło Dostępu Do Logów</font></span>
  173.              <center>  <br><br> <input id="password" name="password" value="" placeholder="Tu wpisz Hasło" type="password"></center>
  174.                 </label>
  175.  
  176.  
  177.                 <p>
  178.  
  179.                 </p>
  180.  
  181.                 </fieldset>
  182.           </form>
  183. 		</div>
  184.  
  185.     </div>
  186. </div>
  187. <div style="display: block;" id="mask"></div></body>
  188.  
  189.  
  190.  
  191.  
  192.  
  193.  
  194.  
  195.  
  196.  
  197. </html>
[HTML] pobierz, plaintext




I teraz tak nie wiem jak go przerobić by:
1. po kliknieciu enter (bez uprzedniego podania hasla) nie zamykal mi okna
2. by pobrac to co w input napisal uzytkownik i sprawdzic czy to co napisal jest rowne np "krowa" jesli nie to maly tekst nad polem input ze haslo nie poprawne jesli wpisal krowa to przeniesienie na inny adres www

Kompletnie już nie wiem co robic wiec prosze o jakies wskazowki z góry dziękuje i pozdrawiam
b4rt3kk
22.11.2012, 20:07:01
Tak ciężko warunek dopisać? Pierwszy, sprawdzający czy pole jest puste:

[HTML] pobierz, plaintext 
  1. if (loginBox == '')
[HTML] pobierz, plaintext


Drugi, czy pole ma wpisane właśnie np. krowa:

[HTML] pobierz, plaintext 
  1. if (loginBox == 'krowa')
[HTML] pobierz, plaintext
wytrazek89
22.11.2012, 20:13:39
ok ale to nie kod php wiec na if nie zajade nigdzie wydaje mi sie bo probowalem z ifami juz ale nic z tego nie wychodzilo
b4rt3kk
22.11.2012, 20:16:33
Przecież widzę, że JS+jQuery, to nie znaczy, że w tym języku nie występuje if.
wytrazek89
22.11.2012, 20:19:30
gdzie mialbym wstawic te ify?
b4rt3kk
22.11.2012, 20:31:45
Tu masz fragment odpowiadający za zamykanie okienka:

[HTML] pobierz, plaintext 
  1. // When clicking on the button close or the mask layer the popup closed
  2. 	$('a.close, ').live('click', function() { 
  3.         if ($('#password').val() != '') {
  4.           alert($('#password').val());
  5. 	  $('#mask , .login-popup').fadeOut(300 , function() {
  6. 		$('#mask').remove();  
  7. 	}); 
  8.         }
  9. 	return false;
  10. 	});
[HTML] pobierz, plaintext
wytrazek89
22.11.2012, 20:53:41
chwila przededukuje to i dam znac czy mi wyszlo smile.gif

ok wiec przygladajac sie tej linijce " if ($('#password').val() != '') {" z tego co rozumiem dalej ona nam mowi ze "jesli w polu do wpisania cos jest(tzn nie jest ono puste) to pokaz nam alerta z tekstem ktory wpisalismy w tamto pole probowalem dalej dodawac nowe ify ze np if ($('#password').val() == 'krowa') { to dalsza czesc ale nie dzialalo wiec nie wiem jak to nadal zrobic
b4rt3kk
22.11.2012, 20:58:12
Pokaż jak próbowałeś dodawać te ify. Ale wyskakuje ten alert po wciśnięciu przycisku czy nie?
wytrazek89
22.11.2012, 21:10:15
ten jezyk to magia doslownie samo PHP szybko dalo sie zalapac ale tuu to juz sie gubie

ify dawalem mniej wiecej tak:

if ($('#password').val() != '' ) {
alert('Podałeś(aś) złe hasło!!!!<br><br>Wpisz na swym czacie /Panel i ponownie wprowadź hasło ');
$('#mask , .login-popup').fadeOut(3000 , function() {
$('#mask').remove();
});


if ($('#password').val() == 'krowa' ) {
alert('brwao ');
$('#mask , .login-popup').fadeOut(3000 , function() {
$('#mask').remove();
});


troszke na szybkiego to wklilem bo juz inaczej zmienilem kod ale ogolnie juz sie w tym gubie po malu np chcialbym na dole dodac jeszcze przycisk OK i ANULUJ (buttony) i jak kliknał by ktos OK to sprawdzi czy to co wpisal w input jest to krowa i jak nie to alert ze zle haslo i ponownie zaladowanie okna do wpisania hasla a jak tak to zamyka dopiero okno i daje dostep do strony a jak ktos by klikanl w anuluj lub ten przycisk maly zamknij to wtedy przenosi do innej lokalizacji
b4rt3kk
22.11.2012, 21:22:45
To dodaj buttony, żaden problem, kod HTML masz podany jak na tacy, możesz go dowolnie zmodyfikować. A w przypadku tych komunikatów to lepiej zastosuj switcha, myślę że będzie to poręczniejsze.
wytrazek89
22.11.2012, 22:28:40
jak klikam ENTER bez podawania hasla lub nawet z podaniem hasla to poprostu odswieza strone jak to zmienic?
b4rt3kk
22.11.2012, 22:49:51
Musisz przechwycić domyślną akcję submit formularza i dostosować według własnych potrzeb. Podpowiedź:

[HTML] pobierz, plaintext 
  1. $('.signin').submit(function() {
  2.   // twoja akcja i warunki
  3. });
[HTML] pobierz, plaintext
b4rt3kk
22.11.2012, 23:23:50
Wpierdzielasz ten kod do swojego skryptu:

[HTML] pobierz, plaintext 
  1. $('.signin').submit(function() {
  2.   // twoja akcja i warunki
  3. });
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. 	$('a.login-window').click(function() {
  4.  
  5. 		// Getting the variable's value from a link 
  6. 		var loginBox = $(this).attr('href');
  7.  
  8. 		//Fade in the Popup and add close button
  9. 		$(loginBox).fadeIn(300);
  10.  
  11. 		//Set the center alignment padding + border
  12. 		var popMargTop = ($(loginBox).height() + 24) / 2; 
  13. 		var popMargLeft = ($(loginBox).width() + 24) / 2; 
  14.  
  15. 		$(loginBox).css({ 
  16. 			'margin-top' : -popMargTop,
  17. 			'margin-left' : -popMargLeft
  18. 		});
  19.  
  20. 		// Add the mask to body
  21. 		$('body').append('<div id="mask"></div>');
  22. 		$('#mask').fadeIn(300);
  23.  
  24.  
  25. 		return false;
  26. 	});
  27. 	// When clicking on the button close or the mask layer the popup closed
  28. 	$('a.close, ').live('click', function() { 
  29. 	  $('#mask , .login-popup').fadeOut(300 , function() {
  30. 		$('#mask').remove();  
  31. 	}); 
  32. 	return false;
  33. 	});
  34.  
  35. $('.signin').submit(function() {
  36.   alert('MOJA AKCJA SUBMITA');
  37. });
  38.  
  39. });
  40. </script>
[HTML] pobierz, plaintext


i teraz wysłanie formularza (czyli wciśnięcie ENTER) spowoduje, że zostanie wywołana Twoja funkcja, zamiast domyślnej akcji formularza submit. Możesz teraz tam zamieścić dowolne warunki.

Pod alertem daj linijkę:

[HTML] pobierz, plaintext 
  1. window.location = "http://adres.pl";
[HTML] pobierz, plaintext


i wpisz sobie dowolny adres na który chcesz żeby przeniosło użytkownika.
wytrazek89
22.11.2012, 23:27:24
Dzięki myśle że już chyba wszystko okazaliście duża pomoc i zrozumienie wink.gif dziekuje wam za to i przepraszam że musieliscie sie denerwowac przez moją słaba wiedza w tym języku jeszcze raz dziękuje wink.gif
b4rt3kk
22.11.2012, 23:30:43
Cytat(wytrazek89 @ 23.11.2012, 00:27:24 ) *
Dzięki myśle że już chyba wszystko okazaliście duża pomoc i zrozumienie wink.gif dziekuje wam za to i przepraszam że musieliscie sie denerwowac przez moją słaba wiedza w tym języku jeszcze raz dziękuje wink.gif


Nie ma sprawy. smile.gif Ja natomiast mam nadzieję, że się czegoś nauczyłeś nowego. smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.