Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [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

Posty w temacie
- wytrazek89   [HTML][CSS][JavaScript]wyskakujace okno z podaniem hasla   22.11.2012, 20:02:18
- - b4rt3kk   Tak ciężko warunek dopisać? Pierwszy, sprawdzający...   22.11.2012, 20:07:01
- - wytrazek89   ok ale to nie kod php wiec na if nie zajade nigdzi...   22.11.2012, 20:13:39
- - b4rt3kk   Przecież widzę, że JS+jQuery, to nie znaczy, że w ...   22.11.2012, 20:16:33
- - wytrazek89   gdzie mialbym wstawic te ify?   22.11.2012, 20:19:30
- - b4rt3kk   Tu masz fragment odpowiadający za zamykanie okienk...   22.11.2012, 20:31:45
- - wytrazek89   chwila przededukuje to i dam znac czy mi wyszlo ...   22.11.2012, 20:53:41
- - b4rt3kk   Pokaż jak próbowałeś dodawać te ify. Ale wyskakuje...   22.11.2012, 20:58:12
- - wytrazek89   ten jezyk to magia doslownie samo PHP szybko dalo ...   22.11.2012, 21:10:15
- - b4rt3kk   To dodaj buttony, żaden problem, kod HTML masz pod...   22.11.2012, 21:22:45
- - wytrazek89   jak klikam ENTER bez podawania hasla lub nawet z p...   22.11.2012, 22:28:40
- - b4rt3kk   Musisz przechwycić domyślną akcję submit formularz...   22.11.2012, 22:49:51
- - b4rt3kk   Wpierdzielasz ten kod do swojego skryptu: [HTML] ...   22.11.2012, 23:23:50
- - wytrazek89   Dzięki myśle że już chyba wszystko okazaliście duż...   22.11.2012, 23:27:24
- - b4rt3kk   Cytat(wytrazek89 @ 23.11.2012, 00:27...   22.11.2012, 23:30:43

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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