Prevent page transition from: target selector

Question

So, I have this modal that appears with the CSS: target selector. However, when you click on the page, you go to the anchor. I would like the page not to go into the 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 .modalDialog position: fixed instead of absolute . This will cause it to always be located where the page scrolls.

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

(There's some other trick involved in this demo version of codepen - adding another goal to the close button on the modal, which is also fixed allows you to scroll the page when you close the modality and change the z-index your modal from -1 to 100 ( or some other large enough integer) will not allow him to block clicks immediately after closing it.)

Answer 2

try stopping the default action of the anchor tag

 $('a').on('click', function(e){ e.preventDefault(); //do your poppin' up here. }); 

Answer 3

Use

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

to change: target selector in CSS, but don't go anywhere. The snippet # / does not exist, so the page will not scroll, but the selector: will change to affect the CSS change.

Answer 4

This has nothing to do with CSS in fact; it's plain old HTML.

You have a hash identifier in your link, it refers to an element on the page. Each browser will scroll the page to the specified item when such a link is clicked. This is a very standard behavior.

You cannot prevent this without using this technique. Well, maybe there is a way to prevent scrolling with JavaScript black magic, but you shouldn't.

Use jQuery instead: http://docs.jquery.com/Tutorials:Basic_Show_and_Hide

Answer 5

Have you tried css3: focus selector?

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

Besides

CSS menu - hold your parent finger when you focus on a submenu

Instead, you can use the <button> and style it as you like. This will prevent the page from crawling since it is not an anchor.