HTML寫(xiě)一個(gè)彈框很麻煩，對(duì)于初步學(xué)習(xí)的人來(lái)說(shuō)义矛，遠(yuǎn)遠(yuǎn)沒(méi)有ios代碼來(lái)的簡(jiǎn)單咆槽，簡(jiǎn)單實(shí)現(xiàn)下：主要用到屬性 display: none;來(lái)進(jìn)行設(shè)置，遮罩就通過(guò)一個(gè)灰色背景假假實(shí)現(xiàn)
效果圖：
彈框.gif
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#dialog{
width: 450px;
height: 350px;
background-color: darkcyan;
position: fixed;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -225px;
display: inline;
}
#upload{
width: 400px;
height: 50px;
background-color:darkolivegreen;
float: left;
}
#upload li{
list-style-type: none;
display: inline;
width: 100px;
line-height: 50px;
text-align: center;
border: 1px solid black;
font-size: 20px;
padding: 4px 10px;
border-radius: 5px;
margin-left: 5px;
cursor: pointer;
}
#li1{
background-color: #fb8d52;
}
#li2{
background-color: #acacac;
}
#closebtn{
width: 32px;
height: 32px;
display: inline;
float: right;
margin: 9px 9px;
cursor: pointer;;
}
.beforeContainer{
width: 390px;
height: 238px;
margin: 30px 30px;
border-color: #acacac;
/*background-color: chartreuse;*/
border-style: dashed;
border-width: 1px;
float: left;
}
#videobefore{
display: inline-block;
float: left;
}
#picturebefore{
display: none;
float: left;
}
.pclass{
width: 100%;
height: 25px;
font-size: 14px;
text-align: center;
/*border: 1px solid black;*/
}
#p1{
color: coral;
margin-top: 74px;
font-size: 17px;
}
#p2{
color: #ffffff;
margin-top: 40px;
}
#p3{
margin-top: 71.5px;
color: black;
font-size: 16px;
background-color: #fb8d52;
border-radius: 5px;
width: 100px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#p4{
margin-top: 10px;
color: coral;
}
#p5{
margin-top: 20px;
color:#ffffff;
}
</style>
</head>
<body>
<div id="dialog">
<ul id="upload">
<li id="li1">上傳圖片</li>
<li id="li2">上傳視頻</li>
</ul>
閉.png)
<div class="beforeContainer" id="videobefore">
<p id="p1" class="pclass">上傳視頻</p>
<p id="p2" class="pclass">上傳視屏大小不得超過(guò)50M劳淆，目前只支持
</div>
<div class="beforeContainer " id="picturebefore">
<p id="p3" class="pclass">選擇圖片</p>
<p id="p4" class="pclass">選擇圖片公開(kāi)</p>
<p id="p5" class="pclass">單張圖片大小不得超過(guò)3M链沼，支持jpg、jpeg沛鸵、bmp括勺、png格式</p>
</div>
</div>
<script>
var li1 = document.getElementById("li1");
var li2 = document.getElementById("li2");
var liA =[li1,li2];
li1.onclick = function () {
changeContent("li1");
}
li2.onclick = function () {
changeContent("li2");
}
//切換內(nèi)容
function changeContent(name) {
var templi = document.getElementById(name);
var type = (name=="li1")?1:2;
selectDiv(type);
for(var i =0 ; i<liA.length;i++){
if (templi == liA[i]){
liA[i].style.backgroundColor ="#fb8d52" ;
}else {
liA[i].style.backgroundColor ="#acacac" ;
}
}
}
//選擇內(nèi)容
function selectDiv(type) {
switch (type){
case 1:
document.getElementById("videobefore").style.display ="inline-block";
document.getElementById("picturebefore").style.display ="none";
break;
case 2:
document.getElementById("videobefore").style.display ="none";
document.getElementById("picturebefore").style.display ="inline-block";
break;
}
}
</script>
</body>
</html>
