Question

所以，我有一些我正在使用的css3弹出窗口/模态。我对他们的工作方式非常满意，但是在模态关闭后，页面会回滚到顶部，我不确定为什么会这样。

你可以看到behavior here这里是html的片段

   <div class="flip">
   <div class="front">
   <img src="images/SDG_ICONS/SDG01.png" alt="No Poverty" />
   </div>
   <div class="back">
      <ul>
        <a href="#ared-no-poverty"><li>ARED</li></a>
        <a href="#agrocenta-no-poverty"><li>AgroCenta</li></a>
        <a href="#tilly-no-poverty"><li>Tilly&#39;s Farm</li></a>
      </ul>
   </div>
   </div>
   <div id="ared-no-poverty" class="overlay">
     <div class="popup">
       <h2>ARED</h2>
       <a class="close" href="#"> &times;</a>
       <p class="popup">Some text in here</p>
</div>

这是我用于弹出/模态

的CSS

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
    z-index: 2;
}
.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
img.popup{
width:150px;
height: auto;
float:left;
}
.popup p{
width:auto;
margin:0;
}
.popup p:nth-child(2){
padding-top:5px;
}
.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: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(88, 120, 33, 0.7); /*0,0,0*/
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
    z-index: 2;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

那么，我怎样才能保持与调用弹出窗口时相同的滚动位置以及导致模态滚动到顶部的原因？

Answer 1

它滚动到顶部的问题是当你关闭叠加层时，你在<a class="close" href="#"> ×</a>中使用了一个sinle哈希，这使得它滚动到顶部

~~要完成这项工作，您可以使用脚本，或者，如果每个链接都有自己的叠加层，您可以定位一个兄弟元素，使其在关闭时保持~~

使用ie #close，它将起作用

Src：How does "#" (hash mark, number sign) close a modal box?

作为旁注，here is a post of mine，它有许多有趣的CSS答案，可能是一个选项，而不是hash making history entries问题@AnkithAmtange提到

css3模式关闭后如何防止页面滚动到顶部？

1 个答案: