Z-index

[Pavel Szabo]

Hi,

I had a problem with captcha. Captcha create the block on the end of page:

<div style="background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); position: absolute; left: 0px; top: -10000px; transition: visibility 0s linear 0.3s, opacity 0.3s linear; opacity: 0; visibility: hidden; z-index: 2000000000;"><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2000000000; background-color: #fff; opacity: 0.05;  filter: alpha(opacity=5)"></div><div class="g-recaptcha-bubble-arrow" style="border: 11px solid transparent; width: 0; height: 0; position: absolute; pointer-events: none; margin-top: -11px; z-index: 2000000000;"></div><div class="g-recaptcha-bubble-arrow" style="border: 10px solid transparent; width: 0; height: 0; position: absolute; pointer-events: none; margin-top: -10px; z-index: 2000000000;"></div><div style="z-index: 2000000000; position: relative;"><iframe src="https://www.google.com/recaptcha/api2/bframe?hl=cs&amp;v=r20170808164053&amp;k=6LeWuiwUAAAAAD5u3bM6cP7L0-GOzpigJSVui_Zv#sdki0umopon7" title="ověření recaptcha" frameborder="0" scrolling="no" sandbox="allow-forms  allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" name="sdki0umopon7" style="width: 100%; height: 100%;"></iframe></div></div>

This code with z-index: 2000000000 caused problem that is not possible to click anywhere.

I must create <div class="wrapper"> around all page with higher z-index: 2000000001, but it is not a good solvation.

Why captcha do it? What is the problem?

Thank, Pavel

[Shawn Duncan]

I'm having the same issue.

[박상현]

I had the same issue.

An invisible div keep blocking the page.

First, I modified css file. When I put css like below.

.wf-active *,.wf-inactive * {

    visibility: hidden;

    font-family: FrutigerLTStd55Roman, FrutigerLTStd45Light, Verdana, Arial, Helvetica;

    font-weight: normal;

}

I could unblock the page but some letters became invisible.

I deleted this css.

Secondly, I did Jquery coding. When the page is loaded completely, jquery find div and make this disappear.

function PageLoad() {

           // find div which is blocking the page.

            var t = $('div').filter(function () {

                var self = $(this);

                return self.css('z-index') == '2000000000' &&

                    self.css('opacity') == '0.05' &&

                    self.css('left') == '0px' &&

                    self.css('top') == '0px' &&

                    self.css('background-color') == 'rgb(255, 255, 255)';

            });

            if (t.css("visibility") != "hidden") {

                t.css("visibility", "");

                t.css("visibility", "hidden");

                t.css("position", "absolute");

                console.log(document.readyState);

            }

        }

        $(document).ready(function () {

            // Chrome browser is okay with window.onload but IE was not.

            // so I used thie way.

            // when user hover on 'body' or click.

            // blocking div will be modified.

            $("body").hover(function () {

                PageLoad();

            });

            $("body").click(function() {

                PageLoad();

            });

         });

2017년 8월 14일 월요일 오전 5시 39분 35초 UTC-4, Pavel Szabo 님의 말: