show：使用PURE CSS加載頁面時的目標彈出窗口

Question

我知道這是基本問題。 但是我無法通過它。 我只是在Pure CSS中有一個彈出窗口的代碼，它在單擊鏈接標記時彈出。 我希望使用jquery或Pure JS在頁面加載時加載此彈出窗口。

請注意，在CSS中，我將“ .overlay”類的可見性設置為none，然后單擊更改將其可見。 我試圖觸發點擊頁面加載並更改頁面加載的可見性。 不幸的是，兩者都失敗了。 我添加了代碼片段。 幫幫我朋友。

 $(document).ready(function() { $("#popup1").trigger('click'); }); 

 .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: 30%; position: relative; transition: all 5s ease-in-out; } .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: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <a id="btn" class="button" href="#popup1">Let me Pop up</a> </div> <div id="popup1" class="overlay"> <div class="popup"> <h2>Notification</h2> <a class="close" href="#">&times;</a> <div class="content"> App is under-construction. But payment on referral income has started. Please stay tuned. </div> </div> </div> 

Answer 1

如果您確實要使用Javascript，可以通過手動設置哈希值來實現：

 $(document).ready(function() { window.location.hash = "#popup1"; }); 

 .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: 30%; position: relative; transition: all 5s ease-in-out; } .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: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="popup1" class="overlay"> <div class="popup"> <h2>Notification</h2> <a class="close" href="#">&times;</a> <div class="content"> App is under-construction. But payment on referral income has started. Please stay tuned. </div> </div> </div> 

Answer 2

 $(document).ready(function() { var href = $('#btn').attr('href'); window.location.href = href; }); 

 .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: 30%; position: relative; transition: all 5s ease-in-out; } .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: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <a id="btn" class="button" href="#popup1">Let me Pop up</a> </div> <div id="popup1" class="overlay"> <div class="popup"> <h2>Notification</h2> <a class="close" href="#">&times;</a> <div class="content"> App is under-construction. But payment on referral income has started. Please stay tuned. </div> </div> </div>