Klikalne elementy pod warstwą

Klikalne elementy pod warstwą

Ostatnio napotkałam na ciekawy problem.

Na stronie został umieszczony formularz zamówienia jako iframe.

Iframe to jest sposób na umieszczanie jednej strony wewnątrz drugiej. Iframe ma jakąś szerokość i wysokość aby zmieścić stronę. Jeśli strona się nie mieści w iframe, pojawiają się paski przewijania.

W tym przypadku formularz zamówienia zawiera kilka etapów zakupu, które są różnej wielkości. Jeśli chcemy uniknąć pasków przewijania, musimy stworzyć odpowiednio dużą ramkę.  Jeśli formularz będzie krótki to zostaje dużo niepotrzebnego miejsca pod spodem.
Aby uzyskać ładny efekt zastosowano warstwę, dzięki czemu formularz pojawia się na tle strony.
position: absolute; top: 0; left:0; height: 1200px; z-index: 9999;

Formularz zakupu nie zasłania strony. Po kliknięciu pojawia się tabelka z cenami, która jest dłuższa i zasłania zawartość strony.

strona html

To rozwiązanie wygląda ładnie ale ma wady.

– zawartość pod warstwą nie jest klikalna

– nie można usunąć warstwy ze strony czyli cofnąć się . Jeśli użytkownik będzie chciał usunąć tabelkę ze strony to nie może tego zrobić.

W pierwszym etapie na stronie jest link, którego nie można kliknąć bo zakrywa go niewidoczna warstwa.
Jednym z rozwiązań jest pointer-events.
.parent {
    pointer-events:none;        
}
.child {
    pointer-events:auto;
}
Jeśli ustawimy pointer-events:none dla formularza i pointer-events: auto dla strony pod nim, to linki na stronie będą klikalne. Nie rozwiązuje to problemu, gdyż w tym momencie formularz nie będzie klikalny, co mija się z celem.
pointer-events:all – w tym przypadku nie zadziałał.
Jedyne rozwiązania jakie mi przychodzą do głowy:

1. zrezygnować z warstwy i pozostać przy ramce z paskami przewijania i przewijać stronę, jeśli je zawartość nie mieści się w ramce

2. umieścić warstwę nad tekstem czy obrazkami, gdzie nie ma linków

3. zastosować fancybox czyli otwierać formularz w wyskakującym okienku, które pojawi się po kliknięciu. Rozwiązanie to ma tę zaletę, że użytkownik może usunąć okienko klikając gdziekolwiek na stronie. Jeśli zawartość okienka się nie mieści, pojawiają się paski przewijania.

responsive_wp_728x90


Profesjonalny Hosting


Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *