Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS][JavaScript]wyskakujace okno z podaniem hasla
wytrazek89
post
Post #1





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 8.06.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #2





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
wytrazek89
post
Post #3





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 8.06.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #4





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Przecież widzę, że JS+jQuery, to nie znaczy, że w tym języku nie występuje if.
Go to the top of the page
+Quote Post
wytrazek89
post
Post #5





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 8.06.2012

Ostrzeżenie: (0%)
-----

gdzie mialbym wstawic te ify?
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #6





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
wytrazek89
post
Post #7





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 8.06.2012

Ostrzeżenie: (0%)
-----

chwila przededukuje to i dam znac czy mi wyszlo (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #8





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Pokaż jak próbowałeś dodawać te ify. Ale wyskakuje ten alert po wciśnięciu przycisku czy nie?
Go to the top of the page
+Quote Post
wytrazek89
post
Post #9





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 8.06.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #10





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
wytrazek89
post
Post #11





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 8.06.2012

Ostrzeżenie: (0%)
-----

jak klikam ENTER bez podawania hasla lub nawet z podaniem hasla to poprostu odswieza strone jak to zmienic?
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #12





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #13





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
wytrazek89
post
Post #14





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 8.06.2012

Ostrzeżenie: (0%)
-----

Dzięki myśle że już chyba wszystko okazaliście duża pomoc i zrozumienie (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #15





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Cytat(wytrazek89 @ 23.11.2012, 00:27:24 ) *
Dzięki myśle że już chyba wszystko okazaliście duża pomoc i zrozumienie (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/wink.gif)


Nie ma sprawy. (IMG:style_emoticons/default/smile.gif) Ja natomiast mam nadzieję, że się czegoś nauczyłeś nowego. (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 13:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn