評論頁 · APP模塊

## 評論頁 ![](https://box.kancloud.cn/2016-08-25_57be9a5a0d54b.png) 代碼如下： ``` <style> .aui-nav { border-top:1px solid #eee; } .ask-input { height: 32px; line-height: 32px; margin: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; color: #999; padding-left: 5px; } .ask-text { height: 120px; line-height: 30px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; color: #666; overflow: hidden; } .ask-text textarea { height: 100%; padding: 5px; margin: 0; border:none; } .mark { background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; z-index: 1; } .ask-reply-btn { padding: 8px 0; } #ask-reply-box { padding: 10px; } #aui-footer { background: rgba(255,255,255,0.5); } #aui-footer.show { -webkit-animation: showIn .5s ease both; animation: showIn .5s ease both; } </style> <div class="mark" id="mark"></div> <footer class="aui-nav" id="aui-footer"> <div class="ask-input" tapmode onclick="showReply()" id="ask-input">回復問答</div> <div id="ask-reply-box"> <div class="ask-text" id="ask-text"> <textarea placeholder="請輸入你的回復，提問者確認后可獲得獎勵"></textarea> </div> <div class="aui-btn aui-btn-block aui-btn-info ask-reply-btn">提交</div> </div> </footer> <script type="text/javascript"> function showReply(){ $api.css($api.dom(".mark"),"display:block"); $api.css($api.byId("ask-input"),"display:none"); $api.css($api.byId("ask-reply-box"),"display:block"); $api.addCls($api.byId("aui-footer"),"show"); } apiready = function(){ $api.addEvt($api.byId('mark'), 'click', function(){ $api.css($api.dom(".mark"),"display:none"); $api.css($api.byId("ask-input"),"display:block"); $api.css($api.byId("ask-reply-box"),"display:none"); $api.removeCls($api.byId("aui-footer"),"show"); }); } ```