2017-11-28 1 views
-1

Ich habe fest positionierte div, die auf der Oberseite der Seite sein müssen, wenn sie geöffnet werden. Und es muss über die ganze Seite strecken.Blockieren/deaktivieren Sie alle Hintergrundelemente

Ich habe einige Eingaben als Hintergrundelemente auf Körper.

Ich möchte alle Tastatur/Klick-Ereignisse von Hintergrundelementen (Eingaben) blockieren/deaktivieren und verhindern. Hier

ist der Code: https://codepen.io/anon/pen/KyGzmN

<body style=" 
    margin: 0; 
"> 

<div style=" 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background: black; 
    z-index: 9999; 
    position: fixed; 
    background: rgba(0,0,0,0.5); 
"> 
<div style=" 
    height: 100px; 
    width: 200px; 
    background: yellow; 
    margin-top: 100px; 
    margin-left: 100px; 
">My Content In Fixed Div 
</div> 

</div> 


    <input> 
    <input> 
    <input> 

</body> 

Ich kann per Mausklick Ereignisse verhindern, aber wenn ich Registerkarte drücken konzentrieren sie die inputs.I wollen das nicht.

Ich total deaktivieren/blockieren die Hintergrundelemente.Wie kann ich das mit CSS tun?

Ich kann jquery.Maybe pure Javascript nicht verwenden.Aber ich brauche das mit CSS.

+0

'Hier ist die code' -Nein, fügen Sie sie als ** Arbeits Schnipsel ** Hier. Siehe [So erstellen Sie ein minimales, vollständiges und überprüfbares Beispiel] (https://stackoverflow.com/help/mcve) – ProEvilz

+0

Fügen Sie tabindex = "- 1" 'zu jedem Eingang hinzu? – evolutionxbox

+0

Ich kann nicht. Es kann viele Elemente als Hintergrundelemente.Wie Hunderte. – javauser35

Antwort

0

hinzufügen disabled="disabled" auf Ihre Eingaben, statisch oder mit js wenn es ändern muss:

var inputs = document.getElementsByClassName('yourClass'); 

function disable() { 
    [].forEach.call(inputs , function(input) { 
    input.setAttribute('disabled', 'disabled'); 
    }); 
} 

function enable() { 
    [].forEach.call(inputs , function(input) { 
    input.removeAttribute('disabled'); 
    }); 
} 

https://jsfiddle.net/axn5wvye/8/