[問題] 怎麼避免確認視窗在其他頁面閃逤?

看板Web_Design作者 (九滴)時間5月前 (), 5月前編輯推噓0(0016)
留言16則, 5人參與, 5月前最新討論串1/1
這是進站的初始確認視窗 在進入後看到網站說明 同意後進入 問題-同意後進入網站 瀏覽其他頁面 還是會先載入出現這個視窗 使畫面閃逤一下 嘗試過不同擺放的位置 都沒有用 請教大家要怎麼修改可以避免? *--------------------------------------- <div class="sp-window"> <div class="sp-text" > <p class="sp-title">網站說明</p> <div class="sp-textb"> <p>說明一:</p> <p>說明二:</p> </div> <div class="choice-btn"> <a class="btn-alpha" id="refresh-page" style="cursor:pointer!important;">確認同意</a>&emsp;&emsp;&emsp;&emsp;<a href="https://google.com/" class="btn-beta" id="reset-session">離開本站</a></div></div></div> <script> jQuery(document).ready(function($){ if (sessionStorage.getItem('advertOnce') !== 'true') { //sessionStorage.setItem('advertOnce','true'); $('.sp-window').show(); }else{ $('.sp-window').hide(); } $('#refresh-page').on('click',function(){ $('.sp-window').hide(); sessionStorage.setItem('advertOnce','true'); }); $('#reset-session').on('click',function(){ $('.sp-window').show(); sessionStorage.setItem('advertOnce',''); }); }); </script> *------------------------------------- -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.83.140.47 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1641976054.A.FFD.html ※ 編輯: ucci (111.83.140.47 臺灣), 01/12/2022 17:45:18

01/12 18:10, 5月前 , 1F
不是很確定你描述的問題,以下通靈:
01/12 18:10, 1F

01/12 18:15, 5月前 , 2F
你在頁面渲染完後,判斷 advertOnce 才對 .sp-window做
01/12 18:15, 2F

01/12 18:15, 5月前 , 3F
隱藏,推測你 .sp-window 預設就是渲染出來,所以會有渲
01/12 18:15, 3F

01/12 18:15, 5月前 , 4F
染完再馬上隱藏的瞬間閃爍
01/12 18:15, 4F

01/12 18:18, 5月前 , 5F
但是不明白進入網站,瀏覽其他頁面是甚麼意思,既然頁面
01/12 18:18, 5F

01/12 18:18, 5月前 , 6F
已轉跳,自然不會有這html,除非你每一頁都有或是spa
01/12 18:18, 6F

01/12 19:47, 5月前 , 7F
這是放在部落格html 每一頁都會有沒錯
01/12 19:47, 7F

01/12 19:48, 5月前 , 8F
希望不管從哪裡進站都先看說明
01/12 19:48, 8F

01/12 20:45, 5月前 , 9F
script會比較晚跑啊 你這樣寫一定會閃
01/12 20:45, 9F

01/12 21:29, 5月前 , 10F
1~4 樓已經告訴你為什麼它會閃了
01/12 21:29, 10F

01/12 21:30, 5月前 , 11F
所以你要做的應該是反過來, 先指定 display:none
01/12 21:30, 11F

01/12 21:30, 5月前 , 12F
這樣還沒執行 script 前是隱藏, 然後 script 裡判斷
01/12 21:30, 12F

01/12 21:31, 5月前 , 13F
是否第一次來 (你原先寫的條件的反向), 第一次來再 show()
01/12 21:31, 13F

01/12 23:22, 5月前 , 14F
仔細想a大說的渲染二字 馬上就去調CSS 果然可行
01/12 23:22, 14F

01/12 23:23, 5月前 , 15F
也非常謝謝L大的說明 謝謝大家
01/12 23:23, 15F

01/14 19:39, 5月前 , 16F
我連問題都看不懂 XD
01/14 19:39, 16F
文章代碼(AID): #1Xtf3s_z (Web_Design)
文章代碼(AID): #1Xtf3s_z (Web_Design)