Impedire il salto della pagina da: selettore di destinazione

Question

Così ho questa modale che si apre usando il CSS: selettore di destinazione. Tuttavia, la pagina salta all'ancora quando si fa clic. Vorrei evitare che la pagina salti al: selettore di destinazione. Come posso fare questo?

<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

Questo non ha nulla a che fare con i CSS in realtà, è pianura vecchio HTML.

Hai un ID di hash nel tuo collegamento, fa riferimento a un elemento nella pagina. Ogni browser dovrebbe scorrere la pagina sull'elemento di riferimento quando viene fatto clic su tale collegamento. Questo è un comportamento molto standard.

Non è possibile impedirlo se non utilizzando questa tecnica. Beh, forse c'è un modo per impedire lo scorrimento con la magia nera JavaScript, ma non dovresti.

utilizzare alcuni jQuery invece: http://docs.jquery.com/Tutorials:Basic_Show_and_Hide

Answer 2

provare ad arrestare l'azione predefinita del tag di ancoraggio

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

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

Answer 3

Hai provato il css3: selettore di messa a fuoco?

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

anche

CSS Menu - Keep parent hovered while focus on submenu

È anche possibile utilizzare un tag <button> invece e lo stile che più vi si prega. Ciò impedirebbe il salto della pagina poiché non è un'ancora.

Answer 4

Creare .modalDialogposition: fixed anziché absolute. Ciò lo farà posizionare sempre dovunque la pagina è attualmente scorsa.

Un esempio più completo: http://codepen.io/mblase75/pen/xbRNeV

(C'è qualche altro inganno coinvolto in questo demo codepen - l'aggiunta di un altro obiettivo per il pulsante 'stretta' sul modale che è anche fixed mantiene la pagina dal scorrimento quando la modal è chiuso, e cambiando il z-index del vostro modale dalla -1 a 100 (o qualche altro opportunamente grande numero intero) per impedire che il blocco scatti subito dopo averlo chiuso.)

Answer 5

Usa

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

per cambiare: selettore di destinazione in CSS ma andare da nessuna parte. Il frammento #/non esiste, quindi la pagina non scorrerà, ma: il selettore di destinazione cambierà per influenzare la modifica del CSS.