css: target не работает на mozilla firefox

Question

Я пытаюсь использовать команду ': target' на css, чтобы показать модальный на моем сайте Wordpress. Он отлично работает с использованием браузера Chrome, но если я использую mozilla, он не работает. Мне нужно изменить свойство 'opacity' на 1, когда whet ': target' активируется. Это «CSS», что я использую:

.modalDialog { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
    z-index: 99999; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
} 



.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
} 

Спасибо всем за вашу помощь.

Answer 1

этот пример работает в Mozilla Firefox DEMO

HTML:

<ul> 
    <li><a href="#h1">link 1</a></li> 
    <li><a href="#h2">link 2</a></li> 
    </ul> 
    <h2 id="h1">link 1</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eligendi, incidunt harum laborum ratione, labore quae modi hic est sint, aperiam corporis nesciunt dolor quasi iusto eaque itaque. Modi, deleniti.</p> 
    <h2 id="h2">link 2</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint voluptates quia culpa, quos facilis, dicta reiciendis impedit deserunt a distinctio corporis in eos ipsum provident cum, dolorum dolorem tempore sapiente.</p> 
</ul> 

CSS:

h2:target { 
    background: #fc0; /* Цвет фона */ 
    padding: 3px; 
}