我想實現一個簡單的教程來解釋我的網站的具體領域與popovers實現的作用。 我的想法是,當用戶點擊按鈕start tutorial
時,一些彈出按順序顯示在不同的元素上,當彈出窗口打開時,屏幕的其餘部分被阻止,用戶只能按next
關閉當前的彈出窗口並打開下面的教程,直到教程結束。 我該怎麼做?如何在瀏覽器中顯示彈出窗口時凍結屏幕?
-6
A
回答
0
當模式是開放的,你必須使用JS暫時補充溢出:隱藏在body元素(這將刪除滾動條在主窗口,防止滾動。)
的標記來管理此類對身體的切換已經回答了/在這裏提供:
0
如果你只是要求用戶不能夠點擊任何地方,除了在本教程中,你可以做一個簡單的疊加像所以(全屏查看片段):
html,
body {
overflow: hidden
}
.block {
height: 100vh;
width: 100vw;
background: black;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
}
.tutorial {
height: 300px;
width: 800px;
background: #ccc;
position: absolute;
top: 50vh;
left: 50vw;
transform: translateX(-50%) translateY(-50%);
}
iframe {
height: 100vh;
width: 100vw;
}
<iframe src="http://autotrader.com" frameborder="0" scrolling="no"></iframe>
<div class="block">
</div>
<div class="tutorial">
</div>
+0
我可以做到這一點還與popovers? – Alessio
+0
這取決於你的意思與彈出? –
相關問題
- 1. 如何讓瀏覽器在顯示彈出窗口時變暗
- 2. 在瀏覽器窗口關閉前顯示jQuery彈出窗口
- 3. 顯示在瀏覽器窗口頂部的彈出窗口,如果彈出窗口阻止程序啓用
- 4. 在瀏覽到其他頁面時不顯示彈出窗口
- 5. 如何使用JavaScript顯示全屏幕彈出窗口?
- 6. 彈出窗口顯示在屏幕中心和上下文外
- 7. 在屏幕上居中顯示一個彈出窗口?
- 8. 顯示彈出/瀏覽器
- 9. 在彈出窗口中顯示結果
- 10. 如何在瀏覽器關閉時創建彈出窗口
- 11. 瀏覽彈出窗口?
- 12. Javascript如何:隱藏瀏覽器彈出窗口onBeforeUnload並顯示自定義彈出窗口
- 13. 在鎖定屏幕上顯示彈出窗口
- 14. Javascript登錄瀏覽器彈出窗口
- 15. Selenium關閉瀏覽器彈出窗口
- 16. 彈出式窗口瀏覽器控件
- 17. Java桌面瀏覽器彈出窗口
- 18. 如何在javascript中顯示全屏彈出窗口?
- 19. 彈出式窗口,中央屏幕
- 20. 彈出窗口在Edge瀏覽器中彈出多個彈出窗口時關閉問題
- 21. 如何在屏幕區域顯示彈出窗口在Flex和AS3
- 22. 在新的瀏覽器窗口GWT彈出窗口
- 23. 如何顯示其他彈出窗口上的彈出窗口?
- 24. 加載文件時全屏幕瀏覽器窗口
- 25. 瀏覽器凍結()
- 26. 在顯示彈出窗口時將灰色應用於非活動屏幕
- 27. 如何在我的主窗口中顯示彈出窗口?
- 28. 如何在reactjs中關閉瀏覽器選項卡時觸發彈出窗口?
- 29. 當用戶嘗試退出瀏覽器窗口時顯示彈出窗口(GMail樣式)
- 30. 如何在使用window.open時停止瀏覽器彈出窗口攔截器
嘗試引導模態http://getbootstrap.com/javascript/#modals – imvain2