切记：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. python中的TypeError错误解决办法

    新手在学习python时候,会遇到很多的坑,下面来具体说说其中一个. 在使用python编写面向对象的程序时,新手可能遇到TypeError: this constructor takes no ar ...

  2. spring源码：IOC（li）

    一.BeanDefinition BeanDefinition是配置文件<bean>元素标签在容器中内部表示形式.创建最终的BeanDefinition主要包括两个步骤: 1)利用Bean ...

  3. CentOS6.8 修改主机名（1）

    1.临时修改主机名   显示主机名:spark@master:~$ hostnamemaster修改主机名:spark@master:~$ sudo hostname hadoopspark@mast ...

  4. ASP.NET路由[ASP.NET Routing]

    ASP.NET路由[ASP.NET Routing] ASP.NET路由允许你在使用URL时不必匹配到网站中具体的文件,因为这个URL不必匹配到一个文件,你使用了描述用户行为且更容易被用户理解的URL ...

  5. 开源物联网框架ServerSuperIO 3.0正式发布（C#），跨平台：Win&Win10 Iot&Ubuntu&Ubuntu Mate，一套设备驱动跨平台挂载，附：开发套件和教程。

    3.0版本主要更新内容: 1.增加跨平台能力:Win&Win10 Iot&Ubuntu&Ubuntu Mate 2.统一设备驱动接口:可以一套设备驱动,跨平台挂载运行,降低人力 ...

  6. jstack+top定位性能问题

    定位性能问题,尤其是cpu使用率过高时,经常需要查找cpu消耗较高的线程,然后查看其堆栈,从而进入代码定位问题. 该场景下, jstack+top是一种非常经典的方式. jstack+top:   1 ...

  7. java web学习总结(二十四) -------------------Servlet文件上传和下载的实现

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  8. tomcat 504 gateway time-out

    今天有个环境ajax调用一个请求的时候,出现一个504 gateway time-out响应,原以为是nginx找不到资源的问题,恰当我们的服务器上又配置了nginx,看了配置文件,没有指向tomca ...

  9. getting started with transformjs

    Introduction In the past two years, more and more friends for mobile web development have used the t ...

  10. 日期关联取最近日期的SQL

    SQL怎么关联,如下图A表用日期加产品编号关联B表的时候,如果日期不存在,则取之前最近一个日期的值,比如A表2012-07-31 关联B表,B表没有对应日期的,就取2012-07-30的 A表     ...