切记：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>

weui dialog的更多相关文章

  1. 微信 + weui 框架记录

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一: 包含button.cell.dialog. progress. to ...

  2. 3java面试题 传智 发的 有用

    第一章内容介绍 20 第二章JavaSE基础 21 一.Java面向对象 21 1. 面向对象都有哪些特性以及你对这些特性的理解 21 2. 访问权限修饰符public.private.protect ...

  3. 微信官方开源UI库-WeUI

    概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog.toast.article.icon等各式元素 ...

  4. weui tabbar 切换

    Html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  5. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

  6. TODO：小程序集成WeUI

    TODO:小程序集成WeUI WeUI 为微信 Web 服务量身设计.WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一. ...

  7. WeUI 为微信 Web 服务量身设计-h5前端框架

    WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress. toas ...

  8. WeUI—微信官方UI库

    WeUI 为微信 Web 服务量身设计 概述 WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell ...

  9. 从WeUI学习到的知识点

    WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Ic ...

随机推荐

  1. 继续上篇抢QQ口令红包，抢那招抢不了的红包技巧

    - - - - - - - - - - -- - - --长按红包,出现回复,点击回复,那回复里有个表情,直接输入那个表情回复就可以抢了 - - - - - - - - --------------- ...

  2. python学习笔记（python简史）

    一.python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum) 目前python主要应用领域: ·云计算 ·WEB开发 ·科学运算.人工智能 ·系统运维 ·金融:量化交 ...

  3. Java多线程整理（li）

    目录: 1.volatile变量 2.Java并发编程学习 3.CountDownLatch用法 4.CyclicBarrier使用 5.BlockingQueue使用 6.任务执行器Executor ...

  4. python爬虫成长之路（一）：抓取证券之星的股票数据

    获取数据是数据分析中必不可少的一部分,而网络爬虫是是获取数据的一个重要渠道之一.鉴于此,我拾起了Python这把利器,开启了网络爬虫之路. 本篇使用的版本为python3.5,意在抓取证券之星上当天所 ...

  5. iOS 中的 HotFix 方案总结详解

    相信HotFix大家应该都很熟悉了,今天主要对于最近调研的一些方案做一些总结.iOS中的HotFix方案大致可以分为四种: WaxPatch(Alibaba) Dynamic Framework(Ap ...

  6. 从0到1打造直播 App

    转自http://dev.qq.com/topic/5811d42e7fd6ec467453bf58 概要 分享内容: 互联网内容载体变迁历程,文字——图片/声音——视频——VR/AR——……..从直 ...

  7. 萌新笔记——linux下（ubuntu）反删除（误删恢复）与回收站制作

    刚刚有个小伙伴不小心删了他写了好几的天代码,为他心疼之余帮他找回了文件. 想到我之前也常常误删一些文件,就干脆分享一下我的反删除方法,并说说我做的回收站(好low的,求大神指点) 首先是反删除软件ex ...

  8. 4-pl-sql的安装

    pl-sql的安装 一．安装pl-sql 1.安装前准备 1).在windows安装的oracle client目录下创建相应目录 2).上传oracle数据库的文件到admin目录下 3).然后打开 ...

  9. Windows 7安装软件时无法将注册值写入注册表的处理方法

    1. 我们来确认一下,有没有安装什么软件把注册表给封了.如杀毒软件,防火墙等.把这些软件关了之后,再安装软件试试:如果不行,就把杀毒软件卸载了,再安装软件试试. 2. 更改组策略设置 步骤: 开始-运 ...

  10. python编码最佳实践之总结

    相信用python的同学不少,本人也一直对python情有独钟,毫无疑问python作为一门解释性动态语言没有那些编译型语言高效,但是python简洁.易读以及可扩展性等特性使得它大受青睐. 工作中很 ...