A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

类似于下图的这种弹框css编写。

1清晰弹框的结构HTML
<div class="men_ban" v-if="false"></div>//外部遮罩层
<div class="conformDialog">//最大的容器
        <div class="title">//头部
              <p>是否下架</p>
        </div>
        <div class="content">//中间荣荣部分
                <div class="contentItem">下架后用户无法搜到此需要此被冻结的token会立即释放</div>
         </div>
       <div class="bottom">//底部按钮部分
               <div class="conformWrapper">
                       <div class="colse">关闭</div>
                       <div class="conform">确认</div>
               </div>
       </div>
       <div class="Close1" >//底部关闭按钮部分
                <i class="iconfont icon-quxiao1"></i>
       </div>
</div>//最大的容器
2.css部分


  • .men_ban {//遮罩层部分



  •   width: 100%;



  •   height: 100%;



  •   position: fixed;



  •   left: 0;



  •   top: 0;



  •   z-index: 666;



  •   background: rgba(0, 0, 0, 0.6);



  • }



.conformDialog{
}
---------------------本文来自 weixin_42554311 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/weixin_425 ... 256?utm_source=copy

1 个回复

倒序浏览
奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马