MUI 自定义从底部弹出的弹出框内容

最近做的项目都是在使用mui做手机网页，大致是下面的这种弹出效果

首先，引入 mui.css或者mui.min.css

引入 mui.min.js或者mui.js

第二步：<a href="#弹窗ID"> </a> //控制弹窗的显示隐藏

<div id="弹窗ID" class="box mui-popover mui-popover-action mui-popover-bottom"></div>

　　　　 自定义弹窗的样式就OK了。

下面是项目代码：

 <div id="popover" class="box mui-popover mui-poppicker mui-popover-action mui-popover-bottom"
      style="height: 500px;background-color: #fff;">
     <div class="mui-popover-arrow"></div>
     <div class="popoverheader">
         <div class="text">添加教育经历</div>
         <a href="#popover"><img src="../image/close.png" alt=""></a>
     </div>

     <form class="mui-input-group" style="margin-right: 0rem;margin-left: 0rem">
         <div class="mui-input-row poschoolName">
             <label>学校名称</label>
             <input id="poschoolName" type="text" placeholder="填写学校名称">
         </div>
         <div class="mui-input-row postartData">
             <label>入学日期</label>
             <input type="text" id="postartData" placeholder="填写入学日期">
             <div class="img">
                 <img class="triangle" src="../image/xiala.png" alt="">
             </div>
         </div>
         <div class="mui-input-row poendData">
             <label>毕业日期</label>
             <input type="text" id="poendData" placeholder="填写毕业日期">
             <div class="img">
                 <img class="triangle" src="../image/xiala.png" alt="">
             </div>
         </div>
         <div class="mui-input-row poschoolType">
             <label>学校性质</label>
             <input type="text" id="schoolType" placeholder="填写学校性质">
             <div class="img">
                 <img class="triangle" src="../image/xiala.png" alt="">
             </div>
         </div>
         <div class="mui-input-row pospecializedName">
             <label>专业名称</label>
             <input type="text" id="pospecializedName" placeholder="填写专业名称">
         </div>
         <div class="mui-input-row podegree">
             <label>所获学位</label>
             <input type="text" id="podegree" placeholder="填写所获学位">
         </div>
         <div class="mui-input-row pocertificateNum">
             <label>证书编号</label>
             <input type="text" id="pocertificateNum" placeholder="填写证书编号">
         </div>
         <div class="mui-input-row podegreeNum">
             <label>学位编号</label>
             <input type="text" id="podegreeNum" placeholder="填写学位编号">
         </div>
     </form>
     <div class="mui-table-view mui-table-view-chevron next">
         <a href="#popover" class="x-next add">添加</a>
     </div>
 </div>