一些弹窗样式

做视频项目的时候用到了很多弹窗,每回做应该都会有不同的弹窗,所以,今天我决定把这些弹窗总结一下,方便以后直接拿来用。
举报弹窗:
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>x</span></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>
                <!--反馈的弹窗 end-->

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.复习离散,数据结构,线代,概率…
心灵鸡汤:
我们的生命如此短暂,有所营谋,必有所烦恼;有所执着,必有所束缚;有所得,必有所失。
人生就像掌纹,虽然弯弯曲曲,但永远掌握在自己手中。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值