ROZWIĄZANE Pop up - newsletter - prosty

Witam! Wczoraj wertowałem neta pod względem Pop Upów dla naszych sklepów. Nie ukrywam jest z tym trochę kombinacji, a sama procedura nie wydaje się wcale taka łatwa.
Doszukałem się takiego tematu. http://blog.szablonsklep.pl/popup-wersja-rwd-czesc-ii/

Bardzo fajnie jest to opisane, Pop up wydaje się prosty. Myślę że dla wielu początkujący ułatwiło by to problem

Potrzebuje waszej pomocy by jednak skonfigurować go na cacy.
Idąc krokami tego Pana finalnie pop up wyskakuję. Natomiast mam pewien problem. Warstwa która jest okienkiem jest pod banerami. Chodzi coś z-index natomiast wpisując duże liczby głębokości jakby tego okienka nic to nie daje, dalej jest przykryty innymi banerami na stronie.

Kolejna sprawa to cień ma być widoczne tylko okienko reszta jakby w ciemnej przeźroczystości. Tutaj natomiast bannerki się nie "wygaszają" są paski po bokach białe.
Wygląda to tak jak na załączonym obrazku.
Czy ktoś jest w stanie pomóc bo takie okienko było by fajne
Pozdrawiam

 

• https://forum.home.pl/search/392188/?q=wyskakujące&o=date
• https://forum.home.pl/search/392189/?q=popup&o=date
• https://forum.home.pl/search/392190/?q=newsletter&o=date

W nawiązaniu do samego okienka, wklejam dla potomnych wyniki wyszukiwania, jeśli ktoś chciałby skorzystać z innych rozwiązań, które już były u nas omawiane. Co do z-indeks, tu @Mariusz i @TheL pewnie więcej wyjaśnią, mi tylko przychodzi do głowy dodanie parametru !important;

 

Można prosić o dokładniejsze wyjaśnienie z tym. Nie jestem aż tak biegły

 

@wues nie wyświetla mi się żaden pop-up jak wchodzę na Twój sklep. Musiałbym to zobaczyć na "żywym organizmie", aby podejrzeć kod CSS dla kilku elementów, o których wspominasz, że źle się wyświetlają.

 

Ok już ustawiam żebyś miał podglad

 

No więc do Własny styl CSS do tego fragmentu kodu:

Code:

#popup-flex {
    min-height: 100px;
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -240px;
    border: 2px solid red;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.5);
    padding: 10px;
    box-sizing: border-box;
}

Dodaj parametr z-index:999, aby kod wyglądał tak:

Code:

#popup-flex {
    min-height: 100px;
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -240px;
    border: 2px solid red;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.5);
    padding: 10px;
    box-sizing: border-box;
    z-index: 999;
}

Spowoduje to, że warstwa odpowiedzialna za wyświetlanie wskazanego pop-upa będzie na pierwszym miejscu.

 

Super dzięki potem przetestuje i dam znać można na was liczyć!

 

Niestety nie zadziałało

 

Dziwne, bo powinno. Włącz proszę pop-upa ponownie, spróbuje jeszcze raz zajrzeć, ale jestem prawie pewny, że tam mała zmiana/dodatek do kodu powinna pomóc.

 

Jednak zadziałało, przepraszam za zamieszanie. Przy okazji jakieś rozwiązanie by na mobilnej wyświetlało się Ok bo okno jest za duże. Skin RWD

 

Panowie macie pomysł jak dostosować pop up żeby się skalował no stronie mobilnej? iopen.pl Z góry dzięki!

 

@wues możesz spróbować w CSS skorzystać z takiego kodu:

Code:

@media (max-width:600px) {
#popup-flex {
    top: 100px;
    left: 50%;
    margin-left: -240px;
}
}

Następnie musisz określić samodzielnie wartości odnośnie wielkości pop-upa na różnych rozdzielczościach ekranu (top, left, margin itp). W polu max-width określać do jakiej maksymalnej szerokości ekranu, ma być wyświetlany poniższy kod. Oznacza to, że jeśli strona zostanie otwarta na ekranie o mniejszej szerokości niż 600px, to poniżej zadeklarowany kod CSS zostanie wykonany.