python學習之網站的編寫（HTML，CSS，JS）（十五）----------示例，彈出一個背景為半黑色，前面是白框的彈窗功能（已經編好的框架）
阿新 • • 發佈：2018-11-12
效果圖，程式碼直接可應用，按自己的需要在其中加入想要的內容：
程式碼及講解：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title> <style> /*通過display設定內容是否可以顯現*/ .hide{ display: none; } /*設定背景的內容，位置固定，讓它距離上下左右的距離都是0，即鋪滿整個頁面，z-index設定為第幾層內容*/ /*opacity設定背景的透明度。*/ .pg-back{ position: fixed; background-color: #000000; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; opacity: 0.6; } /*使得白框處於中間的位置*/ .pg-front{ width: 500px; height: 400px; background-color: #ffffff; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body> <!--黑色底色背景開始--> <div id="i1" class="pg-back hide"></div> <!--黑色底色背景結束--> <!--白色彈窗開始--> <div id="i2" class="pg-front hide"> 在此輸入想要彈出的內容 <input type="button" value="彈回" onclick="cancel()"> </div> <!--白色彈窗結束--> <div> <input type="button" value="彈出" onclick="show()"> </div> <script> alert('歡迎來到逆水行舟不進則退的主頁'); // 通過找到id，去掉或者加入hide屬性，來控制彈窗的有無 function show() { document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function cancel() { document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } </script> </body> </html>