切记：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#开发微信门户及应用(3)--文本消息和图文消息的应答

    微信应用如火如荼,很多公司都希望搭上信息快车,这个是一个商机,也是一个技术的方向,因此,有空研究下.学习下微信的相关开发,也就成为计划的安排事情之一了.本系列文章希望从一个循序渐进的角度上,全面介绍微 ...

  2. PHP多图片上传实例demo

    upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  3. php中抽象类与接口的概念以及区别

    php里面的接口类,抽象类到底有什么用呢? 刚接触php的时候,觉得这个东西没什么用,其实这些东西还是有一定的作用的,下面我就简单的说说. 1.php 接口类:interface 其实他们的作用很简单 ...

  4. A2W、W2A、A2T、T2A的使用方法

    1.A2W和W2A 在<Window核心编程>,多字节和宽字节之间转换比较麻烦的,MultiByteToWideChar函数和WideCharToMultiByte函数有足够多的参数的意义 ...

  5. Dynamics CRM 2015-如何修改Optionset Default Value

    在日常工作中,我们时不时会遇到在CRM测试环境上添加Optionset的时候,Default Value是某个值,但换到Production环境或者其他环境,添加的时候,Default Value可能 ...

  6. [Android Studio]SQLScout插件安装破解

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5972138.html [Android Studio]SQLS ...

  7. Socket--Android王国的外交发言人

    Socket:原意"插座",在Java语言中为"套接字" 用于描述IP地址和端口号,是通信链的句柄,我们可以通过它向网络发送请求或者应答网络请求; 它是支持TC ...

  8. Percona TokuDB

    Percona TokuDB Percona TokuDB 1.     TokuDB说明 2.     TokuDB安装 3.     使用TokuDB 3.1 快速插入和富索引 3.2 聚集sec ...

  9. 转载 NPOI.dll 用法。单元格，样式，字体，颜色，行高，宽度。读写excel

    我用的版本是1.25的.每个版本用法有一点不同 using System; using System.Collections.Generic; using System.ComponentModel; ...

  10. 办公OA的登陆界面..

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...