问如何阻止弹出窗口不隐藏在css中？

EN

.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: auto;
}

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

.modalDialog>#__spookyPopup {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #fff);
  background: -o-linear-gradient(#fff, #999);
}

.profile_container {
  height: 160px;
  width: 400px;
  background: #;
  display: inline-block;
}

.profile_div {
  height: 120px;
  width: 130px;
  margin-top: 20px;
  margin-left: 130px;
  background: #ddd;
  border: 1px solid grey;
}

.head_div {
  min-height: 12px;
  width: 100%;
}



.priv_cont {
  height: 90px;
  width: 400px;
  background: #;
  display: inline-block;
}

.priv_head {
  height: 60px;
  width: 330px;
  margin-left:30px;
  margin-top:15px;
  background: #;

  
}




.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: ;
  color: #FFF;
}

.clicker:hover{border-bottom: 2px solid red ;
}


#click_styling
{
margin-top:20px;
height: 50px;
 width: 197px;
 text-align:center;
 font-size:20px;color:#000;
 line-height:50px;
 text-decoration:none;
 cursor:default;"

}
.clicker.hidden {
  display: none;
}

.hiddendiv {
  height: 0px;
  background-color: ;
  overflow: hidden;
  transition: height 0.5s;
}


.social {
margin-top:20px;
margin-bottom:20px;
  height: 120px;
  width: 400px;
  background: #;
  display: inline-block;
}

.social_link {
  height: 60px;
  width: 330px;
  margin-left:30px;
  margin-top:15px;
  background: #;
 
  
}
.manual_link
{
  height: 35px;
  width: 330px;
  margin-left:30px;
  margin-top:30px;
  background: #e3e3e3;
   border-bottom:2px solid red;
  }
  

.hiddendiv.nr2 {
  background-color: ;
}

#showdiv1:target~div a[href="#showdiv1"],
#showdiv2:target~div a[href="#showdiv2"] {
  display: none;
}

#showdiv1:target~div a[href="#hidediv1"],
#showdiv2:target~div a[href="#hidediv2"] {
  display: inline-block;
}

#showdiv1:target~div .hiddendiv.nr1,
#showdiv2:target~div .hiddendiv.nr2 {
  height: 150px;
}

<a href="#__spooky_auth_popup">Open Modal</a>

<div id="__spooky_auth_popup" class="modalDialog">
  <div id="__spookyPopup">

    <div class="profile_container">
      <div class="profile_div"></div>
    </div>


    <div class="head_div">
      <p style="margin:0;padding:0;text-align:center;
font-size:25px;color:#8d8686;">
      <I>Hey, please login to access your private content.</I>
      </p>
    </div>


    <div id="showdiv1"></div>
      <div id="showdiv2"></div>

        <div>
          <a href="#showdiv1" class="clicker "  id="click_styling" tabindex="1">SOCIAL</a>
          <a href="#hidediv1" class="clicker hidden "  id="click_styling" tabindex="1">SOCIAL</a>

          <a href="#showdiv2" class="clicker "  id="click_styling" tabindex="2">MANUAL</a>
          <a href="#hidediv2" class="clicker hidden "  id="click_styling" tabindex="2">MANUAL</a>

          <div class="hiddendiv nr1">
            <div class="social">
              <div class="social_link"> 
                <div data-html="allow" style="margin-left:80px;margin-top:10px;">
                  <iframe  id="iFrame1"  style="border: 0px;  display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
                </div>
                <!-- End of facebook button -->
              </div>

              <div class="social_link">
                <!-- Optional: Linkedin button starts here -->
                <div data-html="allow" style="margin-left:95px;margin-top:10px;">
                <iframe style="border: 0px;  display: inline-block" class="spoooky-auth" src="https://api.spooo.ky/auth/linkedin" border="0"></iframe>
                <!-- End of linkedin button -->
              </div>
            </div>
          </div>
        </div>

        <div class="hiddendiv nr2">
          <div class="social">
            <div class="manual_link" > 
              <p style="text-align:left;font-size:25px;color:#979191;line-height:50px;">
              <I>WaterMark Text</I></p>
            </div>
          </div>
        </div>
      </div>

      <div class="priv_cont">
        <div class="priv_head">
          <p style="margin:0;padding:0;text-align:center;font-size:18px;color:#000;">
            <I>By continuing to the content you agree with the <a href="#"  style="color:#000;">cookie</a> 
  and <a href="#" style="color:#000;">privacy</a> policies.</I>
          </p>
        </div>
      </div>