一些弹窗样式
做视频项目的时候用到了很多弹窗，每回做应该都会有不同的弹窗，所以，今天我决定把这些弹窗总结一下，方便以后直接拿来用。
举报弹窗：
html代码：
<div class="shade1">
<div class="CPM1">
<h3>举报h3><p class="closew1">×p>
<div class='pop-up1'>
<div class='report report-item2'>
<p>举报原因(必填):p>
<div class='necessary'>
<ul class='necessary-ul'>
<li>
<label for="radio1">
<input type="radio" name="radioName" id="radio1">
<span class='fav-title'>发布淫秽信息span>
label>
li>
<li>
<label for="radio2" >
<input type="radio" name="radioName" id="radio2">
<span class='fav-title'>发布政治敏感信息span>
label>
li>
<li>
<label for="radio3">
<input type="radio" name="radioName" id="radio3">
<span class='fav-title'>谩骂/人身攻击span>
label>
li>
<li>
<label for="radio4">
<input type="radio" name="radioName" id="radio4">
<span class='fav-title'>发布商业信息span>
label>
li>
<li>
<label for="radio5">
<input type="radio" name="radioName" id="radio5">
<span class='fav-title'>欺诈骗钱span>
label>
li>
<li>
<label for="radio6">
<input type="radio" name="radioName" id="radio6">
<span class='fav-title'>低俗span>
label>
li>
<li>
<label for="radio7">
<input type="radio" name="radioName" id="radio7">
<span class='fav-title'>侵犯隐私span>
label>
li>
ul>
div>
div>
<div class='report report-item3'>
<p class='otherThing'>
<label for="radio8">
<input type="radio" onclick="text()" name="radioName" id="radio8">
<span>其他span>
label>
p>
<div class='other-reason'>
<textarea placeholder="自定义理由(100字以内)" class='other-ta' maxlength='100'>textarea>
div>
div>
div>
<button class="btn-sure1">提交button>
div>
div>
css代码：
// 举报的弹窗
.shade1{
position: fixed;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
display:none;
z-index: 999;
.CPM1{
width: 580px;
height: 420px;
background-color: white;
margin: 100px auto;
border-radius: 5px;
position: relative;
opacity:0;
h3{
font-weight: 400;
padding-left:50px;
line-height: 50px;
height: 50px;
color: @CPMh1;
background-color: #f5f5f5;
border-bottom: 1px solid @borderc;
}
.closew1{
font-size: 25px;
text-align: center;
line-height: 25px;
width: 25px;
height: 25px;
display: inline-block;
position: absolute;
top: 12px;
right: 12px;
color: rgb(182, 188, 194);
cursor: pointer;
&:hover {
color: #16e067;
}
}
.pop-up1{
line-height: 20px;
padding: 27px 80px 0;
.report-item2{
margin-bottom: 16px;
p{
font-size: 14px;
color: #999;
}
.necessary{
overflow: hidden;
.necessary-ul{
width:456px;
li{
color: #999;
list-style: none;
float: left;
margin-right: 12px;
margin-top: 22px;
}
}
}
}
.report-item3{
margin-bottom: 40px;
p{
font-size: 16px;
color: #999;
}
.other-reason{
margin-top: 13px;
display: none;
.other-ta{
width: 96%;
border-width: 1px;
border-style: solid;
border-color: #ccd0d7;
border-radius: 4px;
resize: none;
outline: none;
transition: all 0.3s;
padding: 8px;
height: 52px;
}
}
}
}
.btn-sure1{
outline: none;
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 14px;
background: #00a1d6;
border: 1px solid #00a1d6;
border-radius: 4px;
margin: 5px 0 10px 220px;
cursor: pointer;
transition: all 0.3s;
&:hover{
background-color: #01c8d4;
}
}
}
}
收藏的弹窗：
html代码：
<div class="shade">
<div class="CPM">
<h3>添加或取消收藏h3><p class="closew">×p>
<div class='pop-up'>
<div class='group-list'>
<ul class='shadeUl'>
<li>
<label for="默认选择框">
<input type="checkbox" name="radio">
<span class='fav-title'>默认收藏夹span>
label>
li>
ul>
<div class='add-group'>
<div class='add-all'>
<div class='add-pic'><i class='iconfont icon-tianjia'>i>div>
<div class='add-btn'>新建收藏夹div>
div>
<form class='group-input'>
<div class='alert'>请填写收藏夹名称div>
<input type="text" maxlength="20" placeholder="最多可输入20个字" class='form-input'>
<button type="submit" class='group-submit'>新建button>
form>
div>
div>
div>
<button class="btn-sure">确定button>
div>
div>
css代码：
// 点击收藏会出现的弹窗
@CPM: rgba(0,0,0,.3);
@CPMh1: rgb(83, 83, 83);
@borderc: rgb(233, 235, 237);
.shade{
position: fixed;
top: 0px;
width: 100%;
height: 100%;
background-color: @CPM;
display:none;
z-index: 999;
.CPM{
width: 420px;
height: 451px;
background-color: white;
margin: 100px auto;
border-radius: 5px;
position: relative;
opacity: 0;
h3 {
font-weight: 400;
text-align: center;
line-height: 50px;
height: 50px;
color: @CPMh1;
border-bottom: 1px solid @borderc;
}
.closew{
font-size: 25px;
text-align: center;
line-height: 25px;
width: 25px;
height: 25px;
display: inline-block;
position: absolute;
top: 12px;
right: 12px;
color: rgb(182, 188, 194);
cursor: pointer;
&:hover {
color: rgb(70, 70, 70);
}
}
.pop-up{
padding: 0 36px;
height:325px;
.group-list{
min-height: 310px;
// padding-bottom: 14px;
ul{
position: relative;
margin-top: 15px;
margin-bottom: 13px;
height: 250px;
overflow: auto;
/* 滚动条的样式 */
&::-webkit-scrollbar{
width:4px;
}
/* 滚动条里边小滑块的样式 */
&::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow-inset:0 0 5px rgba(0,0,0,.2);
background-color:rgba(0,0,0,.2);
}
&::-webkit-scrollbar-track{
-webkit-box-shadow-inset:0 0 5px rgba(0,0,0,.2);
border-radius: 0;
background:rgba(0,0,0,.1);
}
li{
padding-bottom: 15px;
font-size: 14px;
list-style: none;
color: #222;
cursor: pointer;
input{
width: 20px;
height: 20px;
}
.fav-title{
padding-left: 5px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.add-group{
position: relative;
border: 1px solid #ccd0d7;
width: 100%;
height: 34px;
.add-all{
// display: none;
.add-pic{
display: inline-block;
line-height: 34px;
padding: 0 10px;
font-size: 18px;
font-size: 400;
}
.add-btn{
display: inline-block;
height: 34px;
line-height: 34px;
border-radius: 4px;
}
}
.group-input{
display: none;
height: 34px;
line-height: 34px;
border: 1px solid #00a1d6;
border-radius: 4px;
width: 100%;
position: relative;
.alert{
display: none;
line-height: 40px;
height: 40px;
font-size: 12px;;
position: absolute;
top: -52px;
right: 0;
padding: 0 10px;
border-radius: 4px;
color:white;
background: rgb(233, 67, 67);
}
input{
border: none;
font-size: 12px;
width:77%;
outline: none;
margin-left: 10px;
padding: 0;
box-shadow: none;
height: 100%;
}
.group-submit{
height: 34px;
width: 20%;
position: absolute;
background: #d9f1f9;
border: none;
border-left: 1px solid #666;
border-radius: 0 4px 4px 0;
font-size: 14px;
color: #666;
cursor: pointer;
}
}
}
}
}
.btn-sure {
width: 150px;
height: 50px;
border-radius: 5px;
position: absolute;
outline: none;
border: none;
background-color: rgb(0, 162, 255);
left: 50%;
transform: translateX(-50%);
bottom: 10px;
color: aliceblue;
&:hover {
background-color: rgb(4, 129, 202);
cursor: pointer;
}
}
}
}
删除弹窗：
<div class="shade2">
<div class="CPM2">
<p class="closew2">×p>
<p class='vanish'>删除后,评论下的回复都会删除~p>
<div class='deleteBtn'>
<button class="btn-sure2">提交button>
<button class="btn-del">取消button>
div>
div>
div>
css部分：
// 删除的弹窗
.shade2{
position: fixed;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
display:none;
z-index: 999;
.CPM2{
width: 300px;
height: 160px;
background-color: white;
margin: 180px auto;
border-radius: 5px;
position: relative;
opacity:0;
.closew2{
font-size: 25px;
// text-align: center;
line-height: 25px;
width: 25px;
height: 25px;
// display: inline-block;
// position: absolute;
// top: 12px;
// right: 12px;
float:right;
color: rgb(182, 188, 194);
cursor: pointer;
&:hover {
color: #16e067;
}
}
.vanish{
height: 100px;
line-height: 110px;
margin-bottom: 5px;
font-size: 14px;
color: #bbb;
padding-left:60px ;
}
.deleteBtn{
margin-top:5px;
padding: 0 60px;
button{
width: 85px;
height: 40px;
cursor: pointer;
border-radius: 4px;
outline: none;
display: inline-block;
line-height: 40px;
}
.btn-sure2{
background: #00a1d6;
border: 1px solid #00a1d6;
transition: all 0.3s;
color: white;
&:hover{
background-color: #01c8d4;
}
}
.btn-del{
border: none;
color: block;
&:hover{
background-color: #adadad;
}
}
}
}
}
反馈的弹窗：
<div class="hideBack">
<div class="hideBackForm">
<div class="hideFeed">
<span style="font-size: 20px;">意见反馈span>
<button class="closeBack"><span>xspan>button>
div>
<div class="popub">
<div class="label">反馈内容:div>
<textarea class="feedbacks" autocomplete="off" maxlength="400" type="text" placeholder="请输入反馈内容，我们会尽快安排解决(400字以内)">textarea>
div>
<div class="popub">
<div class="label">联系方式:div>
<textarea class="couple" autocomplete="off" maxlength="200" type="text" placeholder="请输入电话、QQ或邮箱,仅工作人员可见">textarea>
div>
<div class="hideFormBottom">
<input class="submit" type="submit" value="提交"/>
div>
div>
div>
css代码：
/*反馈的弹窗*/
.hideBack{
position: fixed;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
display:none;
z-index: 999;
.hideBackForm{
opacity: 0;
transition: 0.5s;
box-shadow: 0px 0px 15px #515151;
display: inline-block;
background-color: #fff;
position: relative;
top: 10%;
left: 50%;
transform: translateX(-50%);
border-radius: 7px;
width: 520px;
height:400px;
padding: 16px 20px 20px;
.hideFeed{
text-align: center;
padding-bottom:16px;
margin-bottom:24px;
border-bottom: 1px solid #f5f5f5;
h4{
color: #4B4B4B;
position:relative;
left:150px;
display: inline-block;
}
.closeBack{
outline: none;
border: 0;
background:transparent;
float:right;
cursor: pointer;
font-size: 15px;
&:hover{
color: #529373;
}
span{
line-height: 3px;
}
}
}
.popub{
display:flex;
position:relative;
margin-top:15px;
.label{
margin-top:12px;
color: #767676;
}
.feedbacks{
outline: none;
border:1px solid #f5f5f5;
width:400px;
height:125px;
position:relative;
padding:9px 12px 27px;
border-radius: 2px;
color: #606266;
resize: none;
// background: #f5f5f5;
}
.couple{
outline: none;
border:1px solid #f5f5f5;
position:relative;
padding:9px 12px 27px;
border-radius: 2px;
color:#606266; ;
width:400px;
height:81px;
resize: none;
}
}
.hideFormBottom{
overflow: hidden;
.submit{
border: 1px solid #16e067;
margin-top:13px;
float: right;
outline: none;
border-radius: 23px;
// background: #ffdf1f;
width:120px;
height:40px;
line-height: 40px;
cursor: pointer;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
background:#16e067;
}
}
}
}
/*反馈的弹窗 end*/
这些弹窗可能以后都会用到1，所以总结一下1，等到时候用的时候就可以直接用了。
这周总结：
上周考核完之后就开始继续写这个项目，这个星期主要吧评论再完善一下，因为上回写的有点乱，想要10条数据之后会有一个收起来的效果，但是会让遍历评论和点赞之类的执行很多次，所以，这回我决定把他放弃了，让他直接遍历出来玩完就行，最起码不会给自己弄迷，然后就主要写个举报和删除功能，每天写2个四级阅读，错的太离谱，选词填空都几乎可以错完了，如果你觉得你写的不好，你可以看过来，选词填空我最多最多就对了一个，真一个，最少你也知道，我就没脸说，还有算法，啊，我一直的痛啊，为啥我就是不想去学呢？又报了一个发现杯，11号就要考试，我…
刚数据结构期中考试，啊，都是选择填空，但是自己要是不搜，好像什么都不会，要复习了，不，应该预习，16周还要闭关修炼，还要辩论，好多事啊。
下周计划：
1.坚持背词汇，每天写四级题；
2.一定一定一定要联系算法；
3.复习离散，数据结构，线代，概率…
心灵鸡汤：
我们的生命如此短暂，有所营谋，必有所烦恼；有所执着，必有所束缚；有所得，必有所失。
人生就像掌纹，虽然弯弯曲曲，但永远掌握在自己手中。