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>