L'ancre vers mon modal ne fonctionne pas

Bonjour à toutes et à tous,

Je me dirige vers vous car j'ai cherché sur internet comment réaliser un pop-up de type modal en html et css et j'ai trouvé des choses plus que satisfaisantes.
Toutefois, j'ai un problème.
En effet pour aller sur mon modal, je met un HREF dans une balise '<a>', mon navigateur écris correctement mon url : '.......php#modal' toutefois la page reste blanche et pour afficher mon popup, je doit rafraîchir la page avec l'url comprenant le '#modal' il en est de même lorsque je veut fermer la popup.
Voici mon code, si quelqu'un voit une erreur ou connait une solution je l'en remercie d'avance.
Mon code html

<div id="oModal" class="oModal">
  <div>
    <header>
      <a href="#about" title="Fermer la fenêtre" class="droite">X</a>
       <h2>Exemple de fenêtre « modal » stylisée </h2>
     </header>
     <section>
      <p>Description du message. </p>
     <section>
     <footer class="cf">
      <a href="#about" class="btn droite" title="Fermer la fenêtre">Fermer</a>
     </footer>
  </div>
</div>
 

    <div id="about" class="page">

        <div id="post-image" class="row" style="background-image: url('http://placehold.it/1920x1080');"> 
        
        	<div class="header-page padd-y-75">
        
                <div class="header-layer-page padd-y-75 bg-wh-alpha">
                
                    <div class="title-page padd-x-25 fs-clr">about us</div>
                    <!--<a href="contact-page.php" onclick="window.open(this.href, 'Popup', 'scrollbars=1,resizable=1,height=560,width=770'); return false;">valeur_de_la_variable_2</a>-->
                    <a href="#oModal">Ouvrir le popup</a>
                </div>
                
            </div>
                    
        </div>

et le css correspondant a mon modal :

.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}
 
.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
 
.oModal:target > div {
  margin: 10% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div header,.oModal > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.oModal .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.oModal > div h2 {
  margin:0;
}
 
.oModal > div .btn {
  float:right;
}
 
.oModal > div section,.oModal > div > header, .oModal > div > footer {
  padding:15px;
}

Merci de votre aide
Cordialement.