Verhindern, dass Seite springen von der :target-Selektor

So habe ich das modal-Popup mit CSS :target-Selektor. Aber die Seite springt, um den Anker, wenn geklickt wird. Ich möchte verhindern, dass die Seite springen zu den :target-Selektor. Wie kann ich dies tun?

<a href="#openModal">Info</a>

<div id="openModal" class="modalDialog">

CSS:

.modalDialog {
    position: absolute;
    pointer-events: none;
    z-index: 99999;
opacity:0;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 900px;
    height: 506px;
    position: relative;
    background: rgba(0,0,0,0.9);
}
  • Der springende Punkt bei der ein Anker ist, um Ihnen zu erlauben, zu springen, um einen bestimmten Teil einer Seite, wenn der browser zu scrollen, um es zu bekommen, wird es Blättern. Klingt wie :target ist nicht die richtige Wahl für das, was Sie zu tun versuchen.
InformationsquelleAutor jick | 2013-04-05
  1. 2

    Verwenden 

    <a href="#/">...</a>

    in der Reihenfolge zu ändern :target-Selektor in CSS, aber gehen nirgendwo. Das fragment #/nicht vorhanden ist, so dass die Seite nicht scrollen, aber der :target-Selektor wird sich ändern, zu beeinflussen CSS ändern.

    • Welp, das ist nur Felsen. Vielen Dank für die sehr esoterischen trick.
    InformationsquelleAutor Sergio
  2. 2

    Machen die .modalDialog position: fixed statt absolute. Dies wird dazu führen, dass immer positioniert werden, an, wo die Seite ist derzeit gescrollt werden.

    Ein vollständigeres Beispiel: http://codepen.io/mblase75/pen/xbRNeV

    (Es gibt einige andere Tricks beteiligt, dass codepen-demo -- hinzufügen von einem anderen Ziel auf den "schließen" - button in der modal, die auch fixed hält die Seite scrollen, wenn das modal geschlossen ist, und die änderung der z-index Ihrer modal von -1 zu 100 (oder einen anderen ausreichend großen integer) halten Sie von der Sperrung Klicks nach rechts, nachdem Sie es schließen.)

    • Der "sonstige Betrug" ist genial. Seite scrollen auf non-JS modal war ein dealbreaker für mich-aber dieses Update ist perfekt. Gut gemacht!
    InformationsquelleAutor Blazemonger
  3. 1

    versuchen, stoppen Sie die Standard-Aktion des Anker-Tags

    $('a').on('click', function(e){
    e.preventDefault();

    //do your poppin' up here.
});
    • Eigentlich, wenn die :target selector gemeint ist, zeigen die .modalDialog, preventDefault würde verhindern, dass die Aktion auch!!!!! Das würde nur funktionieren, wenn die Logik zu zeigen, Modal werden in der jQuery-was nicht Recht ist begrifflich.
    • Wenn Sie verhindern, dass standardmäßig weder :Ziel der Arbeit...
    InformationsquelleAutor dork
  4. 0

    Dies hat nichts zu tun mit CSS eigentlich, es ist plain old HTML.

    Haben Sie eine hash-id in deinem link, sondern verweist auf ein element auf der Seite. Jeder browser würde die Seite scrollen, um das referenzierte element, wenn ein solcher link angeklickt wird. Das ist sehr standard-Verhalten.

    Können Sie nicht verhindern, dass andere als die von nicht mit dieser Technik. Gut, vielleicht gibt es eine Möglichkeit zu verhindern, dass das scrollen mit JavaScript schwarze Magie, aber Sie sollten nicht.

    Verwendung einiger jQuery statt: http://docs.jquery.com/Tutorials:Basic_Show_and_Hide

    InformationsquelleAutor Andrey Mikhaylov - lolmaus
  5. 0

    Haben Sie versucht, die css3 :focus selector?

    https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

    Auch

    CSS-Menü - Halten Eltern schwebte, während der Fokus auf Untermenü

    Können Sie auch einen <button> tag statt und Stil es jedoch Sie bitte. Das würde verhindern, dass Ihre Seite zu springen, da es keine Anker.

    • Es ist mir nicht klar, wie würde man mit :focus statt :target in diesem Fall.
    • Während es kann funktionieren, um die Anzeige der modalen Dialogfeld, sobald etwas in den dialog mit interagiert wird sich der Schwerpunkt und der dialog verschwindet.
    InformationsquelleAutor Todd Baur
Schreibe einen Kommentar