切记：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. 让我们再为C#异步编程Async正名

    本文版权归博客园和作者吴双本人共同所有.转载和爬虫必须在显要位置注明出处:http://www.cnblogs.com/tdws 半年前翻译了一系列很糟糕的异步编程文章,用异步的常用语来说:" ...

  2. 使用PD（PowerDesigner）图如何快速生成创建数据库表的SQL脚本

    打开PD软件: 1.新建概念模型(conceptual Data Model) File-->New Model-->Conceptual Data Mode 或者点击工作区,右键--&g ...

  3. C# if中连续几个条件判断

    C# if中连续几个条件判断 1.if (条件表达式1 && 条件表达式2) 当条件表达式1为true时 using System; using System.Collections. ...

  4. Objective-c粒子动画

    前面贴过几篇关于SpriteKit的案例文章,其中涉及到的动画都是材质类的图片切换或则常规的动画效果,没涉及到今天要说的粒子动画,今天说的粒子动画就是在游戏中实现更佳炫酷的效果必须使用的类,OC中粒子 ...

  5. SpringMVC传值、转发、重定向例子

    练习接收页面参数值 使用request 使用@RequestParam注解 使用实体对象 练习向页面传出数据 使用HttpServletRequest和session 使用ModelAndView对象 ...

  6. MySQL动态游标

    通过(准备语句+视图+静态游标)实现 -- 建立测试表和数据 create table webuser (username varchar(10)); insert into webuser valu ...

  7. HTTPS和HTTP的区别

    (转自:http://www.php100.com/html/it/biancheng/2015/0209/8582.html) 总的来说,http效率更高,https安全性更高. 首先谈谈什么是HT ...

  8. [原创]如何利用BI搭建电商数据分析平台

    某电商是某大型服装集团下的重要销售平台.2015 年,该集团品牌价值达数百亿元,产品质量.市场占有率.出口创汇.销售收入连年居全国绒纺行业第一,在中国有终端店3000多家,零售额80 亿.其羊绒制品年 ...

  9. 如何理解javaScript对象？

    在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...

  10. Hibernate 系列 04 - Hibernate 配置相关的类

    引导目录: Hibernate 系列教程 目录 前言: 通过上一篇的增删改查小练习之后,咱们大概已经掌握了Hibernate的基本用法. 我们发现,在调用Hibernate API的过程中,虽然Hib ...