Login popup box login error.

usoban je 7. nov 2012 ob 18:46 izjavil:

ti rabis informacijo o tem, ali prikazes popup ali ne. Ugotovit je treba samo, kako jo pridobit.
Da se na veliko nacinov, enega si prikazal ze sam, tako da npr. v primeru napake redirectas na index.php#login-box, nato pa bo tistale zgornja koda preverila, ali se #login-box nahaja hash delu URL-ja ali ne (hash del je tisti del za znakom # oz. skupaj z njim) in ga v tem primeru prikazala.

Manjka ubistvu samo tisti del kode, ki prikaze popup. Tega pa ze mas, ane?

V kolikor delas z jQuery, potem vkljucis sledeco kodo, ki je prakticno ekvivalentna zgornji, s to razliko da ti ni potrebno pripenjat "onload" callbacka na body element v tvojem HTML-ju.

 jQuery(document).load(function(){
 if(location.hash === '#login-box') {
 // prikazi popup
 }
 });
 

															<a href="#login-box" class="login-window glow">
															
															<h2>Prijava</h2>
															
															
															</a>
															<div id="login-box" class="login-popup">
																	<a href="#" class="close"><img style="float:right;" src="images/close_pop1.png" class="btn_close" title="Close Window" alt="Close" /></a>
																	  <form method="post" class="signin" action="./login-update/main.php">
																			<fieldset class="textbox">
																			<label class="username">
																			<span>Uporabnisko ime / e-mail</span>
																			<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Uporabnik">
																			</label>
																			<label class="password">
																			<span>Geslo</span>
																			<input id="password" name="password" value="" type="password" placeholder="Geslo">
																			</label>
																			<button class="submit button" type="submit">Prijavi</button>
																			<p>
																			<a class="forgot" href="#">Pozabil geslo?</a>
																			</p>        
																			</fieldset>
																	  </form>
															</div>
																		
										
 

								$(document).ready(function() {
									$('a.login-window').click(function() {
										
												//Getting the variable's value from a link 
										var loginBox = $(this).attr('href');

										//Fade in the Popup
										$(loginBox).fadeIn(300);
										
										//Set the center alignment padding + border see css style
										var popMargTop = ($(loginBox).height() + 24) / 2; 
										var popMargLeft = ($(loginBox).width() + 24) / 2; 
										
										$(loginBox).css({ 
											'margin-top' : -popMargTop,
											'margin-left' : -popMargLeft
										});
										
										// Add the mask to body
										$('body').append('<div id="mask"></div>');
										$('#mask').fadeIn(300);
										
										return false;
									});
									
									// When clicking on the button close or the mask layer the popup closed
									$('a.close, #mask').live('click', function() { 
									  $('#mask , .login-popup').fadeOut(300 , function() {
										$('#mask').remove();  
									}); 
									return false;
									});
								});

<script>
																
								$(document).ready(function() {
									if(window.location.hash === '#login-box') {
										
										
												//Getting the variable's value from a link 
										var loginBox = $('#login-box');
										document.write(loginBox);
										//Fade in the Popup
										$(loginBox).fadeIn(300);
										
										//Set the center alignment padding + border see css style
										var popMargTop = ($(loginBox).height() + 24) / 2; 
										var popMargLeft = ($(loginBox).width() + 24) / 2; 
										
										$(loginBox).css({ 
											'margin-top' : -popMargTop,
											'margin-left' : -popMargLeft
										});
										
										// Add the mask to body
										$('body').append('<div id="mask"></div>');
										$('#mask').fadeIn(300);
										
										return false;
									});
									
									// When clicking on the button close or the mask layer the popup closed
									$('a.close, #mask').live('click', function() { 
									  $('#mask , .login-popup').fadeOut(300 , function() {
										$('#mask').remove();  
									}); 
									return false;
									});
								});
								</script>

function showPopup() {  // showPopup je ime funkcije
    if(window.location.hash === '#login-box') {
        //Getting the variable's value from a link
        var loginBox = $('#login-box');
        
        //Fade in the Popup
        $(loginBox).fadeIn(300);
         
        //Set the center alignment padding + border see css style
        var popMargTop = ($(loginBox).height() + 24) / 2;
        var popMargLeft = ($(loginBox).width() + 24) / 2;
         
        $(loginBox).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });
         
        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);


        // When clicking on the button close or the mask layer the popup closed
        $('a.close, #mask').live('click', function() {
            $('#mask , .login-popup').fadeOut(300 , function() {
                $('#mask').remove(); 
            });
            return false;
        });
    }
}

$('a.login-window').click(showPopup); // namesto funkcije mu podtaknes njeno ime
$(document).load(showPopup);          // enako kot zgoraj, vendar ob drugem dogodku