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.
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.
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ć.
.parent {
pointer-events:none;
}
.child {
pointer-events:auto;
}pointer-events:all – w tym przypadku nie zadziałał.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.
