Why, when opening a modal window located in the header chunk, does it redirect me to the main page?

Question

css

The simplest modal window in html and css
(here it is)

<div class="account" style="display: block;position: relative;width: 90px;float: right; text-align: center;color: #FFF;">
       <i class="fa fa-user-circle-o" style="display: block; font-size: 18px;"></i>
       <div class="total-price-basket" style="text-align: center;">
       <a href="#openModal" class="lbl modalochka" style=" color:#fff;font-size:12pt;font-family:Arial;">Аккаунт</a>
       <div id="openModal" class="modalDialog">
               <div>
                        <a href="#close" title="Закрыть" class="close">&#10006</a>
                        <h2>Авторизуйтесь</h2>
                        

    

    

        

            

                
Login
                Username
                    
                
                
                Password
                    
                
                

                
                
                
                
            
        
    

                        <a href="">Напомнить пароль |</a><a href="" class="reg">Регистрация</a>
               </div>
       </div>
                                    
       </div>
</div>

and its "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;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  display: none;
  pointer-events: none;
}
.modalDialog:target {
  display: block;
  pointer-events: auto;
}

.modalDialog > div {
  width: 500px;
  height:300px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;

  background: #fff;
.close {
    
  color: #000;
  line-height: 1px;
  position: absolute;
  right: 12px;
  text-align: center;
  top: 190px;
  width: 2px;
  text-decoration: none;


}
.reg{
    text-decoration:none;
    position:absolute;
    bottom:50px;
}

.close:hover { background: #00d9ff; }

It is located in the header chunk, but when it is activated from a page, for example, a product catalog, it opens fine, but at the same time redirects to the main page
. Why?
If you need more code - just tell me
Thanks in advance for your answer!

Answer 1

Because <a href> is the link that the browser should navigate to.
Or change it to some other HTML element (for example, <div> with the onclick parameter), or in this <a href> enter the onclick parameter, in which be sure to use e.preventDefault()and return false;, Google will help you!

Answer 2

because the hash mark # in the link leads to the main page