Prevent page jump from :target selector

css

Solution

Use

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

in order to change :target selector in CSS but go nowhere. The fragment #/ doesn't exists, so page won't scroll, but the :target selector will change to affect CSS change.

Problem

So I have this modal that pops up using the CSS :target selector. However, the page jumps to the anchor when clicked. I would like to prevent the page from jumping to the :target selector. How can I do this? ``` <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); } ```

Original source

Related problems