CSS Popup覆蓋瀏覽器後退按鈕

當我關閉我的開發站點上的彈出窗口後，單擊瀏覽器上的後退按鈕（最新的Firefox），後退按鈕不起作用，並且彈出窗口重新打開，導致出現循環用戶不能使用後退按鈕。CSS Popup覆蓋瀏覽器後退按鈕

我認爲它是重定向（URL中的＃）或會話相關。但沒有任何cookie腳本似乎工作。我希望彈出窗口只在用戶點擊按鈕打開時纔打開。

該網站目前正處於脫機狀態。我只是用瀏覽器和代碼編輯器對它進行硬編碼。

我希望有人能告訴我我錯過了什麼。這是一個非常簡單的CSS彈出窗口。下面是彈出代碼：

/*Popup*/ 
 
.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: 50%; 
 
    position: relative; 
 
    transition: all 5s ease-in-out; 
 
} 
 
.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: #08899e; 
 
} 
 
.popup .content { 
 
    max-height: 50%; 
 
    overflow: auto; 
 
} 
 

 
@media screen and (max-width: 700px){ 
 
    .box{ 
 
    width: 70%; 
 
    } 
 
    .popup{ 
 
    width: 70%; 
 
    } 
 
}

<a class="button" href="#popup1" data-rel="back">Let me Pop up</a>. Add more text here... 
 

 
<div id="popup1" class="overlay"> 
 
    <div class="popup"> 
 
    <a class="close" href="#">&times;</a> 
 
    <h2>Title Goes Here...</h2> 
 
    <div class="content"> 
 
     Text goes here.... 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-11-17 CC87

你有這個腳本試過嗎？

 if (window.location.hash) { 
      if (window.history && history.pushState) { 
       window.history.pushState("", document.title, window.location.pathname); 
      } else { 
       // Prevent scrolling by storing the page's current scroll offset 
       var scroll = { 
        top: document.body.scrollTop, 
        left: document.body.scrollLeft 
       }; 
       window.location.hash = ''; 
       // Restore the scroll offset, should be flicker free 
       document.body.scrollTop = scroll.top; 
       document.body.scrollLeft = scroll.left; 
      } 
     }

我還發現花葯的文章對您：[提問] Close pop up on back button

來源

2016-11-17 10:22:43 vuquanghoang

我已經試過了劇本，並沒有喜悅，到目前爲止，但我想知道如果我需要改變任何變量。感謝您的文章。我也會嘗試那裏的答案。 – CC87

你可以嘗試將代碼粘貼到codepen或jsfiddle嗎？ – vuquanghoang

這是我第一次嘗試CodePen，所以希望這可以工作：http://codepen.io/anon/pen/wooWyy?editors=1111 – CC87

CSS Popup覆蓋瀏覽器後退按鈕

回答

相關問題