带有关闭按钮的 CSS 弹出窗口

Question

我正在使用 CSS 在我的页面上控制和显示 POPUP，一切正常，但我想要“确定”按钮关闭弹出窗口，而不是通过单击右上角的十字按钮来关闭它。有什么办法可以在 css 中执行此操作。或者我可以为此做些什么。

    .box {
      width: 40%;
      margin: 0 auto;
      background: rgba(255,255,255,0.2);
      padding: 35px;
      border: 2px solid #fff;
      border-radius: 20px/50px;
      background-clip: padding-box;
      text-align: center;
    }
    
    .button {
      font-size: 1em;
      padding: 10px;
      color: #fff;
      border: 2px solid #06D85F;
      border-radius: 20px/50px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease-out;
    }
    .button:hover {
      background: #06D85F;
    }
    
    .popup h2 {
      margin-top: 0;
      color: #333;
      font-family: Tahoma, Arial, sans-serif;
    }
    .popup .close {
      position: absolute;
      top: 20px;
      right: 30px;
      transition: all 0.2s;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #333;
    }
    .popup .close:hover {
      color: #06D85F;
    }
    .popup .content {
      max-height: 30%;
      overflow: auto;
    }
    
    /*Let's make it appear when the page loads*/
    .overlay:target:before {
        display: none;
    }
    .overlay:before {
      content:"";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      background: rgba(0, 0, 0, 0.6);
      position: fixed;
      z-index: 9;
    }
    .overlay .popup {
      background: #fff;
      border-radius: 5px;
      width: 64%;
      position: fixed;
      top: 25%;
      left: 18%;
      padding: 25px;
      margin: 70px auto;
      z-index: 10;
      -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }
    .overlay:target .popup {
        top: -100%;
        left: -100%;
    }
    
    @media screen and (max-width: 768px){
      .box{
        width: 70%;
      }
      .overlay .popup{
        width: 70%;
        left: 15%;
      }
    }

<!--popup starts-->	
    <div id="popup1" class="overlay">
    	<div class="popup">
    		<h3 style="margin-bottom: 13px; text-align:center; color:red;">Your Application Id : <?php echo $appid;?></h3>
    		<a class="close" href="#popup1">&times;</a>
    		<div class="content">
    			Thank you <span style="text-transform:uppercase; font-weight:600;"><?php echo $firstname;?>&nbsp;<?php echo $middlename;?>&nbsp;<?php echo $surname;?></span> for registring for e-visa service.there is more text. 
    		</div>
    	</div>
    </div>
    <!--popup end-->

Answer 1

....或者您可以只使用样式为按钮的 anchor

    .popup h2 {
      margin-top: 0;
      color: #333;
      font-family: Tahoma, Arial, sans-serif;
    }
    .popup .close {
      display:block;
      border:1px solid darkblue;
      text-align:center;
      background: steelblue;
      color:white;
      border-radius:5px;
      padding:5px;
    }
    .popup .close:hover {
      color: #06D85F;
    }
    .popup .content {
      max-height: 30%;
      overflow: auto;
    }
    
    /*Let's make it appear when the page loads*/
    .overlay:target:before {
        display: none;
    }
    .overlay:before {
      content:"";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      background: rgba(0, 0, 0, 0.6);
      position: fixed;
      z-index: 9;
    }
    .overlay .popup {
      background: #fff;
      border-radius: 5px;
      width: 64%;
      position: fixed;
      top: 0;
      left: 18%;
      padding: 25px;
      margin: 70px auto;
      z-index: 10;
      -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }
    .overlay:target .popup {
        top: -100%;
        left: -100%;
    }
    
    @media screen and (max-width: 768px){
      .box{
        width: 70%;
      }
      .overlay .popup{
        width: 70%;
        left: 15%;
      }
    }

<!--popup starts-->	
    <div id="popup1" class="overlay">
    	<div class="popup">
    		<h3 style="margin-bottom: 13px; text-align:center; color:red;">Your Application Id : <?php echo $appid;?></h3>
    		<div class="content">
    			Thank you <span style="text-transform:uppercase; font-weight:600;"><?php echo $firstname;?>&nbsp;<?php echo $middlename;?>&nbsp;<?php echo $surname;?></span> for registring for e-visa service.there is more text. 
    		</div>

        <a class="close" href="#popup1">OK</a>

    	</div>
    </div>
    <!--popup end-->