一.mui-popover要顯示、隱藏彈出菜單,可使用錨點方式.
<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>
二.通過js的方式控制彈出菜單,實現任意元素上彈出.
mui(彈出層元素).popover(status[,anchor]);
mui(彈出層元素).popover('show ');//show hide toggle
//傳入toggle參數,用戶也無需關心當前是顯示還是隱藏狀態,mui會自動識別處理;
mui(彈出層元素).popover('toggle',document.getElementById(顯示位置元素));