Prevent page jump from :target selector

Question

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

Answer 1

Make the .modalDialog position: fixed instead of absolute. This will cause it to always be positioned at wherever the page is currently scrolled.

A more complete example: http://codepen.io/mblase75/pen/xbRNeV

(There's some other trickery involved in that codepen demo -- adding another target to the 'close' button on the modal which is also fixed keeps the page from scrolling when the modal is closed, and changing the z-index of your modal from -1 to 100 (or some other suitably large integer) will keep it from blocking clicks right after you close it.)