Question

当这个CSS驱动的弹出框关闭时，有没有人可以告诉我一个解决办法让页面不会跳回到顶部？

此时弹出窗口在正确的位置打开，但当您关闭它时，页面会跳回到顶部。

＆＃13;

body {
  font-family: Arial, sans-serif;
  background-color:#721213;
  background-size: cover;
}

h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: orange;
  margin: 100px 0;
}

.box {
  width: 20%;
  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 orange;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: orange;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 40%;
  position: relative;
  transition: all 5s ease-in-out;
  min-height:500px;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

.iframe {
	width:95%;
	display:block;
	margin:0px auto 0px auto;
	height:500px;
}

＆＃13;

<div style="width:50%; margin:20px auto; background-color:#000; height:1000px;"></div>

<div style="width:50%; margin:20px auto; height:500; padding:200px 50px 20px 50px;">

<a href="#popup1">Let me Pop up</a>

<div id="popup1" class="overlay">
	<div class="popup">
		<h2>Here i am</h2>
		<a class="close" href="#">×</a>
		<div class="content">
            <iframe class="iframe" src="http://www.impressdesign.com.au/clients/IMP/test.pdf"></iframe>
		</div>
	</div>
</div>

</div>

＆＃13;

Answer 1

编织： http://kodeweave.sourceforge.net/editor/#3cfa8a8181c0ffdc30103eb2bc19d9b3

编织： （在href上正确使用哈希）
http://kodeweave.sourceforge.net/editor/#3a84a44278b04eea7b5d0f067ba22427

停止使用 href="#"而开始使用 href="javascript:void(0)"。

它跳转到顶部的原因是因为当你在href属性中使用散列时，它会指向一个ID，如果没有指定，它默认会转到顶部。除非您在JS中使用e.preventDefault()来使用:target。

因为您正在使用<a href="#popup1">Let me Pop up</a> <a class="close">×</a>这可以通过定位新ID轻松解决。

所以改变这个......

<a href="#popup1" id="showpopup">Let me Pop up</a>
<a class="close" href="#showpopup">×</a>

到此......

input[type=checkbox]

它已经修复了！

注意： click event使用:target代替margin:0px auto 0px auto;：You can do the same effect

一些关键注意事项：

<div style="width:50%; margin:20px auto; background-color:#000; height:1000px;"></div>

<!-- 
  Instead put your CSS in your style sheet as a class;
  that way it's easier to manage, maintain and get help if needed.
-->
<div class="box"></div>

值0不应指定单位。

将HTML添加到HTML元素

也是不好的做法

body {
  padding: 1em;
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.left {
  text-align: left;
}

以下是有关如何在href属性上正确使用哈希标记的一种方法示例。

<ul class="left">
  <li>
    <a href="#lorem">Lorem.</a>
  </li>
  <li>
    <a href="#ipsum">Ispum!</a>
  </li>
  <li>
    <a href="#dolor">Dolor!</a>
  </li>
  <li>
    <a href="#sit">Sit!</a>
  </li>
  <li>
    <a href="#amet">Amet!</a>
  </li>
</ul>

<p id="lorem" class="left">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste distinctio omnis a nihil, quisquam nisi similique facere, reprehenderit sint nostrum. Ipsa quibusdam, adipisci laudantium nam voluptatum quasi animi placeat eveniet.
</p>

<p id="ipsum" class="left">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel tempora quasi, maiores debitis cupiditate laboriosam alias placeat temporibus veritatis. Quisquam, debitis dolorem saepe enim maiores, ex numquam corporis atque magnam.
</p>

<p id="dolor" class="left">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione architecto quia officiis, amet. Eaque, et quia ducimus possimus rem suscipit, maxime, porro mollitia, corporis sequi magnam debitis. Expedita iure, maiores.
</p>

<p id="sit" class="left">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ipsum vitae quasi, id reiciendis iure qui veritatis voluptatibus omnis libero ea, labore voluptate maxime, ducimus tenetur, deleniti. Rem, consequatur, accusantium.
</p>

<p id="amet" class="left">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum maiores saepe sunt commodi soluta minus ad. Facilis magnam, distinctio voluptatibus ratione iste, laboriosam hic perspiciatis molestiae repellat accusamus tempora cumque!
</p>

<a href="#">Go to top</a>

CREATE CLUSTERED INDEX Saleperday ON business_hours (shop_id,day,type);

Answer 2

发生这种情况是因为你关闭的按钮是一个元素而href =“＃”将它改为div元素而不是a 编辑：我不知道为什么我有箭头向下/指向下方但是我会更容易解释你你的代码：

<div class="popup" id="popup">
        <h2>Here i am</h2>
        <div onClick="document.getElementById('popup').style.display='none';">X</div>
</div>

我的建议：

<?php 
  require_once("dbconn.php");
 $sql = "SELECT staffName, staffID FROM staff";  
  $rs = mysqli_query($dbConn, $sql)
  or die ('Problem with query' . mysqli_error($dbConn));
 ?>

 <form id="task9" action="task7.php" method="get">   

<?php
while($row = mysqli_fetch_array($rs)) { 
 $name=$row["staffName"];
$staffId=$row["staffID"];
?>

 <input type='radio' name='staffID' value='<?php echo $staffId  ?>'/>
 <?php echo $name; ?>
 <br/>
 <?php
 }
 ?> 

 <br/><br/>

 <input type="submit" name="submit" method="get">
 <input type="reset"  name="reset">
</form>

我们在（div.popup）元素中添加了id =“popup”，然后用

替换了“element”关闭按钮

CSS弹出窗口在关闭时会跳回页面顶部

2 个答案: