HTML+JS+CSS之切换弹框切换
2017-01-23 本文已影响14人
雪_晟
HTML写一个弹框很麻烦，对于初步学习的人来说，远远没有ios代码来的简单，简单实现下：主要用到属性 display: none;来进行设置，遮罩就通过一个灰色背景假假实现
效果图：
弹框.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>
<div class="beforeContainer" id="videobefore">
<p id="p1" class="pclass">上传视频</p>
<p id="p2" class="pclass">上传视屏大小不得超过50M，目前只支持
</div>
<div class="beforeContainer " id="picturebefore">
<p id="p3" class="pclass">选择图片</p>
<p id="p4" class="pclass">选择图片公开</p>
<p id="p5" class="pclass">单张图片大小不得超过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");
}
//切换内容
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" ;
}
}
}
//选择内容
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>
