Okienko logowania jest ciągle na samym środku

Witam. Gdy otworzyłem inną przeglądarkę by przetestować jedną rzecz na forum niestety zobaczyłem, że osoby niezalogowane mają ciągle na samym środku okienko by się zalogować, nieważne co przeglądają na forum. Niestety okienka nawet się nie da zamknąć. Klikając na krzyżyk nic się nie dzieje, okienko się nie zamyka i można je zamknąć gdy naciśnie się przycisk "zaloguj" na stronie, otworzy się nowe okienko i dopiero wtedy można je zamknąć.

No super. A może adres forum?

No super. A może adres forum?

Mógłbym wiedzieć po co się tak pytasz o te adresy forum?

Forum mam postawione na localhost

Skąd mamy wiedzieć, co się dzieje. To może być wina pluginu, złego kodu, braku plików. Skoro sam nie potrafisz tego sprawdzić, to znaczy, że potrzebujesz pomocy, której niestety nie otrzymasz, dopóki nie podasz adresu do forum (postaw na jakimś darmowym serwerze). Nie domyślimy się, serio..

http://testoweforumkappa.cba.pl/index.php

Wszystko dzieje się gdy wkleję to do global.css

/** Modal Start **/

.blocker {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 9999;
padding: 20px;
box-sizing: border-box;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.75);
text-align: center;
}

.blocker:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em;
}

.blocker.behind {
background-color: transparent;
}

.modal {
width: 400px;
text-align: left;
background: #fff;
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(images/spinner_big.gif) no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}

/** Modal End **/

Michał Wajrak napisał 16.02.2018, 22:35:
Kody podajemy w tagach [code] lub [php], poprawia to czytelność posta.

Sprawdź konsole, napraw błędy - brakuje wiele plików.

Jak otworzyć tą konsole?

Problem już rozwiązałem. Stworzyłem nowy styl i zamiast usuwać wszystko co jest pomiędzy Modal Start - Modal End to dodałem to co wkleiłem wyżej.

Teraz jest jeszcze mały problem. Okienko logowania jest na dole w lewym rogu. Jak wyśrodkować to na stronie?

W global.css zamień kod pomiędzy /** Modal Start **/ i /**Modal End **/

.blocker {

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 9999;
padding: 20px;
box-sizing: border-box;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.75);
text-align: center;
}

.blocker:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em;
}

.blocker.behind {
background-color: transparent;
}

.modal {
width: 400px;
text-align: left;
background: #fff;
display: inline-block;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
transform: translateX(-50%) translateY(-50%);
}

.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(images/spinner_big.gif) no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}

Jeśli to co podałeś wyżej wkleję pomiędzy /** Modal Start **/ i /**Modal End **/ to okienko z logowaniem będzie ciągle na samym środku. Każdy użytkownik, który wejdzie na forum będzie miał okienko logowania a mi chodzi o to, że jak ktoś naciśnie Zaloguj to wtedy pojawi się okienko na środku.

Podgląd: http://testoweforumkappa.cba.pl

Jesteś pewien? Kiedy sam to wkleiłem wszystko zaczęło działać..
Dodatkowo popatrz na konsolę.. Prawie 50 błędów to trochę za dużo..
Spróbuj wgrać najlepiej cały styl od nowa upewniając się że robisz wszystko poprawnie. Brakuje ci strasznie dużo plików.

@szymex71 a jak odpalasz tą konsole?

@szymex71  a jak odpalasz tą konsole?

Klikasz prawym przyciskiem myszy na stronie, wybierasz zbadaj i klikasz zakładkę console.

Jesteś pewien? Kiedy sam to wkleiłem wszystko zaczęło działać..
Dodatkowo popatrz na konsolę.. Prawie 50 błędów to trochę za dużo..
Spróbuj wgrać najlepiej cały styl od nowa upewniając się że robisz wszystko poprawnie. Brakuje ci strasznie dużo plików.

Błędy były spowodowane przez to, że nie wgrywałem grafiki do folderu images.

Tak wygląda całe moje Modal

/** Modal Start **/

.blocker {

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 9999;
padding: 20px;
box-sizing: border-box;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.75);
text-align: center;
}

.blocker:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em;
}

.blocker.behind {
background-color: transparent;
}

.modal {
width: 400px;
text-align: left;
background: #fff;
display: inline-block;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
transform: translateX(-50%) translateY(-50%);
}

.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(images/spinner_big.gif) no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
/** Modal End **/

Błąd  nadal się pojawia.

Michał Wajrak napisał 20.02.2018, 17:14:
Kod dodajemy w tagach

Błędy dalej występują :v To chyba od tego :v

   

@szymex71 A ty nie miałeś żadnych błędów w konsoli jak sam wkleiłeś?