Verhindert den Seitensprung von: Zielauswahl

8

Ich habe also dieses Modal, das mit dem Selektor CSS: target erscheint. Die Seite springt jedoch zum Anker, wenn sie angeklickt wird. Ich möchte verhindern, dass die Seite zum Zielwähler springt. Wie kann ich das tun?

%Vor%

CSS:

%Vor%     
jick 05.04.2013, 07:16
quelle

5 Antworten

2

Mache .modalDialog position: fixed anstelle von absolute . Dadurch wird es immer dort positioniert, wo die Seite gerade gescrollt wird.

Ein vollständigeres Beispiel: Ссылка

(Es gibt noch andere Tricks in dieser Codepen-Demo - das Hinzufügen eines weiteren Ziels zur Schaltfläche "Schließen" auf dem Modal, das auch fixed enthält, verhindert das Scrollen der Seite, wenn das Modal geschlossen wird, und das Ändern der z-index Ihres Modals von -1 bis 100 (oder einer anderen geeigneten großen Ganzzahl) verhindert, dass Klicks direkt nach dem Schließen blockiert werden.)

    
Blazemonger 06.01.2015 18:40
quelle
1

Versuchen Sie, die Standardaktion des Anchor-Tags zu stoppen

%Vor%     
dork 05.04.2013 07:35
quelle
1

Verwenden Sie

%Vor%

um zu ändern: Zielselektor in CSS, aber nirgendwohin gehen. Das Fragment # / existiert nicht, daher wird die Seite nicht geblättert, aber der: Ziel-Selektor ändert sich, um die CSS-Änderung zu beeinflussen.

    
Sergio 14.01.2017 06:12
quelle
0

Das hat eigentlich nichts mit CSS zu tun, es ist einfach altes HTML.

Sie haben in Ihrem Link eine Hash-ID, die auf ein Element auf der Seite verweist. Jeder Browser würde die Seite zu dem referenzierten Element scrollen, wenn auf diese Verknüpfung geklickt wird. Das ist sehr Standardverhalten.

Sie können das nicht verhindern, indem Sie diese Technik nicht verwenden. Nun, vielleicht gibt es eine Möglichkeit, Scrollen mit JavaScript Black Magic zu verhindern, aber Sie sollten nicht.

Verwenden Sie stattdessen jQuery: Ссылка

    
quelle
0

Haben Sie den css3: Fokus-Selektor ausprobiert?

Ссылка

Auch

CSS-Menü - Behalten Sie die Maustaste gedrückt, während Sie auf das Untermenü

Sie können stattdessen auch ein <button> -Tag verwenden und es wie gewünscht formatieren. Das würde verhindern, dass deine Seite springt, da es kein Anker ist.

    
Todd Baur 23.07.2013 03:38
quelle

Tags und Links