切记：weui dialog 的样式是在weui.css，而不是在weui.min.css
HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <title>选择科室</title> <!--官网demo css--> <link rel="stylesheet" type="text/css" href="../../css/example.css" /> <!--weui css--> <link rel="stylesheet" href="../../css/weui.css" /> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" /> </head> <body ontouchstart> <!--弹框的最外层 js_container--> <div class="container js_container"> <div class="page"> <div class="weui-jiaj-panel"> <div class="weui-cell"> <div class="weui-cell__bd"> <input type="text" class="weui-input" placeholder="骨科" /> </div> </div> </div> <div class="weui-cells__title">选择科室</div> <div class="weui-jiaj-panel"> <div class="weui-jiaj-btn-cell"> <div class="weui-btn weui-btn_mini weui-btn_default">骨科</div> <div class="weui-btn weui-btn_mini weui-btn_default">妇科</div> <div class="weui-btn weui-btn_mini weui-btn_default">儿科</div> <div class="weui-btn weui-btn_mini weui-btn_default">骨科</div> <div class="weui-btn weui-btn_mini weui-btn_default">妇科</div> <div class="weui-btn weui-btn_mini weui-btn_default">儿科</div> </div> </div> <!--点击 id="showKeshi"--> <div class="bd spacing"> <div class="weui-btn weui-btn_mini weui-btn_primary" id="showKeshi">其它</div> </div> <!--showKeshi 科室弹框--> <div class="weui_dialog_alert" id="keshiDialogPanel" style="display: none;"> <div class="weui_mask"></div> <div class="weui_dialog"> <div class="weui_dialog_hd"><strong class="weui_dialog_title">输入科室</strong></div> <div class="weui_dialog_bd"> <div class="weui-jiaj-dialog-panel"> <div class="weui-cell"> <div class="weui-cell__bd"> <input type="text" class="weui-input" placeholder="骨科" /> </div> </div> </div> </div> <div class="weui_dialog_ft"> <a href="javascript:;" class="weui_btn_dialog primary">确定</a> </div> </div> </div> <!--button--> <div class="weui-jiaj-bd"> <div class="weui-jiaj-btn-spc weui-jiaj-btn-info"> <a href="javascript:;" class="weui-btn weui-btn_plain-default js_cell" data-id="doctorInfo">保存</a> </div> </div> </div> </div> <!--页面切换--> <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script> </body> </html>
弹框JS：
$(function () { //获取js_container的jQuery节点 var $container = $('.js_container'); $container.on('click', '#showKeshi', function () { $('#keshiDialogPanel').show(); $('#keshiDialogPanel').find('.weui_btn_dialog').on('click', function () { $('#keshiDialogPanel').hide(); }); }) });
CSS:
.weui-jiaj-panel{ background-color: #fff; margin-top: 10px; position: relative; overflow: hidden; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .weui-jiaj-dialog-panel{ background-color: #fff; margin-top: 10px; position: relative; overflow: hidden; } .weui-jiaj-btn-info{ margin-top: 1em; }
其它的demo：点击红框弹出页面
<div class="weui-cell"> <div class="weui-cell__hd"><label for="hospitalName" class="weui-label">姓名</label></div> <div class="weui-cell__bd"> <div id="doctorNameShow" class="weui-cell__ft">潘仁和</div> //id为click点击对象 </div> </div>
<!--姓名修改弹框--> <div class="weui_dialog_alert" id="doctorNameDialog" style="display: none;"> <div class="weui_mask"></div> <div class="weui_dialog"> <div class="weui_dialog_hd"><strong class="weui_dialog_title">医生姓名</strong></div> <div class="weui_dialog_bd"> <div class="weui-jiaj-dialog-panel"> <div class="weui-cell"> <div class="weui-cell__bd"> <input type="text" class="weui-input" placeholder="潘仁和" /> </div> </div> </div> </div> <div class="weui_dialog_ft"> <a href="javascript:;" class="weui_btn_dialog primary">确定</a> </div> </div> </div>