HTML 5彈框表白代碼可以用來制作一個浪漫的表白頁面,讓你的心意不再藏在心底,讓你心愛的人看到你的真心。下面是一份HTML 5彈框表白代碼:
<!DOCTYPE html> <html> <head> <title>我想告訴你</title> <style> /*彈框樣式*/ #msg{ width: 300px; height: 200px; background-color: #FFF; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; border-radius: 5px; display: none; z-index: 1000; } #msg h2{ text-align: center; color: #F00; font-size: 28px; } #msg p{ text-align: center; margin-top: 50px; font-size: 24px; } #msg button{ width: 100px; height: 40px; background-color: #F00; color: #FFF; border-radius: 5px; font-size: 18px; position: absolute; right: 20px; bottom: 20px; outline: none; border: none; } /*遮罩層樣式*/ #shade{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; z-index: 999; display: none; } </style> </head> <body> <div id="shade"></div> <div id="msg"> <h2>親愛的xxx</h2> <p>我喜歡你很久了,是否愿意跟我在一起?</p> <button id="confirm">確定</button> </div> <script> var shade = document.getElementById('shade'); var msg = document.getElementById('msg'); var confirmBtn = document.getElementById('confirm'); /*點擊確認按鈕*/ confirmBtn.addEventListener('click',function(){ shade.style.display = 'none'; msg.style.display = 'none'; }); /*點擊頁面其他區域,彈框消失*/ shade.addEventListener('click',function(){ shade.style.display = 'none'; msg.style.display = 'none'; }); /*在屏幕中央顯示彈框*/ function showMsg(){ shade.style.display = 'block'; msg.style.display = 'block'; } /*3秒后自動彈出*/ setTimeout(showMsg,3000); </script> </body> </html>
以上代碼中,我們利用了HTML 5的一些新特性,如位置定位,遮罩層等。當然,這只是一個示例代碼,你可以按照自己的喜好進行修改,比如改變彈框樣式、修改彈框內容等,讓表白更具個性。祝你表白成功!
上一篇html 5拖放設置表單
下一篇論文css概述