Prosty popup z logowaniem - napis się nie wyświetla

pracuje z mapboxem i chcialem zrobic sobie prosty popup z logowaniem na bazie tego przykladu
http://www.alessioatzeni.com/wp-content/tutorials/jquery/login-box-modal-dialog-window/index.html

Jednak gdy tak zrobilem, tekst mi sie nie pojawial nad mapa, wiec probowalem z buttonem. Dziala :) tzn wyswielta sie przed mapa wiec teoretycznie taki kod

<button id='login-popup' onclick="location.href='#login-box'"> Log/Reg</button>

robi taki sam co

<div class="post">
  <div class="btn-sign">
	<a rel="nofollow" href="#login-box" class="login-window">Login / Sign In</a>
   </div>
</div>

tylko ze jeden jest na znaczniku "a" a drugi na buttonie. Skrypt do uruchomienia a jest nastepujaca

$(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 and add close button
		$(loginBox).fadeIn(300);
		
		//Set the center alignment padding + border
		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;
	});
});

probowalem zmienic to na buttona, ale jakos mi nie wyszlo i popup nie wyskakuje (adres sie zmienia na index.html#login-box)

zaczalem czytac dlaczego nie jest tekst przed mapa, znalazlem z-index. Zadowolony dodaje do css z-index ale nadal sie nie wyswietla.
wylaczam mape, a tekstu nadal nie ma. Probowalem takze takiego kodu ale rowniez nic sie nie wyswietla (tekst)

<div class = "login-popup">
<a rel="nofollow" href="#login-box">
  <div class="btn-sign">
    <span class="login-window">Login / Sign In</span>
  </div>
</a>
<div>

caly kod html moge udostepnic, ale jest bardzo brzydki wiec najpierw chcialbym bo jako tako uporzadkowac :) a wszystkie zrodla moge udostepnic jutro

a jeszcze pytanie jakby ktos sie zgubil. Czemu mi nie wyswietla tekstu z linku? jak wpisze po prostu np qwe to mi wyswietla ten napis

starałem się, bo od początku było widać, że chaos - ale nie zrozumiałem. 10 razy czytać nie będę, więc jutro wytłumacz to sensownie i wrzuć to w czytelnej formie na jsbin.com (rozpakowywanie zipów jest nudne)

http://pastebin.com/q7Nz6puv

wybaczcie za straszny kod, na razie sobie mocno eksperymentuje z nim dlatego jest w takim nieladzie

1. czemu ten kod

<div class = "login-popup">
<a rel="nofollow" href="#login-box">
  <div class="btn-sign">
    <span class="login-window">Login / Sign In</span>
  </div>
</a>
<div>

nie jest wyswietlany? Nie moge nigdzie znalezc "Login / Sign In"

2. jak

$(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 and add close button
    $(loginBox).fadeIn(300);
    
    //Set the center alignment padding + border
    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;
  });
});

przerobic tak by aktywowal sie na konkretnym buttonie a nie na linku?

3. jak wyswietlic jakis napis przed mapa? z-index srednio chce mi dzialac (nie ma tego w tym przykladzie, ale moge dodac nowy jezeil bedzie trzeba)

0. kod umieść na jsbin, nie ma pastebin!!! niech to działa, niech na tym można od razu pracować i jednym klikiem przekazać Ci poprawki, niech to będzie rozdzielone - JS i CSS i HTML.

1. Nadałeś klasę, a w CSSie selektor masz wg ID. [Narzędzia webdev!]

2. wyjaśnij to lepiej, gdzie masz ten button?

3. pokaż konkretny przykład na jsbin-ie, u mnie działa: http://i.imgur.com/B4EVKEf.png

0. http://jsbin.com/ImeJOcox/1/edit
1. tego nie rozumiem, musze poczytac wiecej o selektorach i klasach w css w takim razie (nie za bardzo wiem czym sie rozni class od id, teraz to zauwazylem) a do narzedzi to niestety poki co nie moge platnego sobie zalatwic.
2. button dodany, po kliknieciu chcialbym by login screen (popup) sie pokazal
3. rozwiazany, dodalem id zamiast class i sie pokazuje. Definitywnie musze poczytac wiecej o tym

wiem teraz ze musze uwazac na id/class jak zmienilem z class na id tam gdzie byl login-popup to zaczelo dzialac :) takze dzieki za pomoc przynajmniej cos ruszylo

edit mam juz chyba nowy poukladany kod. Niestety Login / Sign In nadal jest pod mapa a jak w niego klikne nadal nie pokazuje sie popup z login screenem
http://jsbin.com/uVikotIv/1/edit

Nie ogarniam.
Button jest W ŚRODKU popupa, który jest ukryty. Ja chcesz, żeby dało się w niego kliknąć, jak go nie ma? :P
A następnie miał się pojawić cały popup?

ok, to bylo glupie, ale mozesz sprawdzic drugiego linka? ktory dalem? Tam juz nie ma buttonow tylko jest ten link nieszczesny. Dzieki za cierpliwosc :)

edit. W pierwszym linki popup nie jest ukryty. Wiec zapewne chodzilo Ci o drugiego linka. dobra musze to przestudiowac od poczatku do konca, bez glupich pytan ;)

Dałem przyciskowi position: absolute; i jak klikam na ELEMENT <a> [!] (nie na całe tło, które nie jest elementem <a> :P) to się pojawia jak trzeba ;)
http://jsbin.com/uVikotIv/4/

Poprawka żeby na całym elemencie działało:
http://jsbin.com/uVikotIv/5/

• informacja - że w poprawce 5 widać, że klikanie POD przyciskiem też powoduje ten efekt. Tło to zakładam grafika, która jest mniejsza niż wpisany na sztywno wymiar przycisku?

Tak na przyszłość zwróć większą uwagę na formatowanie, a najlepiej używaj jakiegoś edytora z automatycznym formatowaniem kodu (np. VS Express), bo większość Twoich błędów wyszłaby tuż po ich popełnieniu, vide np.

<div class = "login-popup">
    <a rel="nofollow" href="#login-box">
        <div class="btn-sign">
            <span class="login-window">Login / Sign In</span>
        </div>
    </a>
<div> <!-- wtf? wcięcie znika, a tag nie zamyka się? ergo popełniony błąd - niezamknięty tag ---->