Zu machen, wie die zugrunde liegenden div unklickbaren?

Ich machte overlay-div mit:

position: absolute; top: 0; left: 0; widht: 100%; height: 100%;

Grundsätzlich möchte ich diese overlay-div zu decken meine ganze Seite. Und es tut, was ich brauche, aber ich brauche auch die zugrunde liegenden divs werden unklickbaren. Sie sind in der Tat unklickbaren aber nur im FF, Safari und Chrome. im IE und Opera können Sie immer noch auf Tasten unter.

Hat jemand eine Idee, wie kann ich das erreichen "unklickbaren zugrunde liegende Verhalten"?

InformationsquelleAutor Goran | 2009-12-12
  1. 15
    .class {pointer-events: none;}
    InformationsquelleAutor Kadae
  2. 1

    Fügen Sie einen onclick-handler für das overlay-div.

    InformationsquelleAutor clorz
  3. 1

    Müssen Sie auch auf der z-index, um sicherzustellen, dass Ihre neue div-Element oben auf alles andere. Ohne dieses Attribut Sie sind auf die Gnade des Browsers in Bezug auf die eine nach oben und erhalten Sie die onclick -

    Sich auch bewusst sein, eine bekannte IE-Versionen (also ältere Versionen) Fehler, input type Auswahl ignoriert z-index

    InformationsquelleAutor mfeingold
  4. 1

    Wenn Sie mit so etwas wie jQuery, die Sie tun können, so etwas wie

    $("a:not(.overlay)").click(function(e) { e.preventDefault(); });
$("input:not(.overlay)").click(function(e) { e.attr("disabled", "disabled"); });

    Sie werden alles geben und in Ihrer überlagerung (links, Schaltflächen, etc.) der overlay-Klasse, und dies wird effektiv deaktivieren, alles andere auf Ihrer Seite.

    InformationsquelleAutor Jarrett Meyer
  5. 0

    Tthe overlay CSS mit:

    z-index: 10000;

    wird sich darum kümmern.

    InformationsquelleAutor Nidhin Bose J.
  6. 0

    Dies kann leicht getan werden mit javascript:

    • Erstellen Sie ein div-Maskierung die gesamte Seite mit einem hohen z-index
    • Machen die Maske zu fangen alle Klicks
    • Beim entfernen der Maske, die Seite wird wieder anklickbar.

    Dieser Ansatz kann natürlich verwendet werden, auf alle dom-Elemente, nicht nur den Körper.

    var mask = $('<div></div>')
  .css({
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    'z-index': 10000
  })
  .appendTo(document.body)
  .click(function(event){
    event.preventDefault();
    return false;
   })

    Beispiel arbeiten hier: http://jsfiddle.net/GTPW3/3/

    InformationsquelleAutor Lasse Skindstad Ebert
Schreibe einen Kommentar