色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

html 5彈框表白代碼

錢琪琛2年前8瀏覽0評論

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的一些新特性,如位置定位,遮罩層等。當然,這只是一個示例代碼,你可以按照自己的喜好進行修改,比如改變彈框樣式、修改彈框內容等,讓表白更具個性。祝你表白成功!