黑马程序员技术交流社区

标题: 【上海校区】弹框编写 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-9-28 09:26
标题: 【上海校区】弹框编写
类似于下图的这种弹框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

---

作者: 不二晨    时间: 2018-10-10 13:28
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2