Zapobiegaj przeskakiwaniu strony: wybierak celu

Question

Mam więc ten modalny obiekt, który pojawia się przy użyciu selektora celu CSS: target. Jednak po kliknięciu strona przeskakuje do kotwicy. Chciałbym zapobiec przeskakiwaniu strony do selektora celu. Jak mogę to zrobić?

<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); 
} 

Answer 1

To nie ma nic wspólnego z CSS Właściwie to zwykły stary HTML.

Masz identyfikator hash w swoim łączu, odwołuje się do elementu na stronie. Każda przeglądarka przewija stronę do elementu, do którego się odwołuje po kliknięciu takiego linku. To bardzo standardowe zachowanie.

Nie można temu zapobiec, nie stosując tej techniki. Cóż, być może istnieje sposób, aby zapobiec przewijaniu przy użyciu czarnej magii JavaScript, ale nie powinieneś.

Stosowanie niektórych jQuery zamiast: http://docs.jquery.com/Tutorials:Basic_Show_and_Hide

Answer 2

próby zatrzymania domyślne działanie znacznika zakotwiczenia

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

    //do your poppin' up here. 
}); 

Answer 3

próbowałeś CSS3: selektor ostrości?

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

także

CSS Menu - Keep parent hovered while focus on submenu

Można również użyć zamiast <button> tag i styl to jednak należy. To uniemożliwiłoby przeskoczenie strony, ponieważ nie jest kotwicą.

Answer 4

Utwórz .modalDialogposition: fixed zamiast absolute. Spowoduje to, że będzie zawsze umieszczony w miejscu, w którym aktualnie przewija się stronę.

Pełniejszy przykład: http://codepen.io/mblase75/pen/xbRNeV

(Jest jakiś inny oszustwo zaangażowany w tej codepen demo - dodając kolejny cel do przycisku „Zamknij” na modalnym, który jest również fixed utrzymuje stronę z przewijania gdy modalne jest zamknięta, a zmiany z-index swojego modal z -1 do 100 (lub innej odpowiednio duża liczba całkowita), zachowa je blokowaniu kliknięć zaraz po jej zamknięciu.)

Answer 5

Korzystając

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

aby zmienić: selektor celu w CSS, ale nigdzie nie chodź. Fragment #/nie istnieje, więc strona nie będzie przewijana, ale selektor: cel zmieni się, aby wpłynąć na zmianę CSS.