弹框编写

 

类似于下图的这种弹框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{

}