切记：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. enote笔记语言（2）

    why not(whyn't)                 为什么不(与“why”相对应,是它的反面)   how对策 how设计     key-memo                    ...

  2. Scrapy开发指南

    一.Scrapy简介 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. Scrapy基于事件驱动网络框架 Twis ...

  3. MYSQL 开发技巧

    主要涉及:JOIN .JOIN 更新.GROUP BY HAVING 数据查重/去重 1 INNER JOIN.LEFT JOIN.RIGHT JOIN.FULL JOIN(MySQL 不支持).CR ...

  4. entityframework学习笔记--006-表拆分与实体拆分

    1.1 拆分实体到多张表 假设你有如下表,如图6-1.Product表用于存储商品的字符类信息,ProductWebInfo用于存储商品的图片,两张表通过SKU关联.现在你想把两张表的信息整合到一个实 ...

  5. 你搞懂 ORACLE、 SQLSERVER、MYSQL与DB2的区别了吗

    ORACLE. SQLSERVER.MYSQL与DB2的区别--平台性:    Oracle.MYSQL与DB2可在所有主流平台上运行:    SQL Server只能在Windows下运行: --安 ...

  6. swift 学习笔记

    1. 数组中取出字符串的方法: 1)let string = "\arr[0]" 2) let string = String(stringInterpolationSegment ...

  7. Android 手机卫士--参照文档编写选择器

    本文来实现<Android 手机卫士--导航界面1的布局编写>中的图片选择器部分的代码. 本文地址:http://www.cnblogs.com/wuyudong/p/5944356.ht ...

  8. Centos6.5安装mysql不能启动，应该安装mysql-server

    centos中安装mysql很简单如下命令即可 yum install mysql 装好了, 运行mysql ERROR 2002 (HY000): Can't connect to local My ...

  9. WordPress + Nginx +PHP+MySQL

    Windows下配置Nginx+php环境 1)php的安装与配置. 直接解压下载好的php包,到D盘wnmp目录(D:\wnmp),这里把解压出来的文件夹重命名成php5.进入文件夹修改php.in ...

  10. IIS 启用CORS ，IISExpress 通过IP 访问

      在IIS 10中启用CORS: <system.webServer> <handlers> <remove name="OPTIONSVerbHandler ...