使用步骤说明:

今天遇到一个问题,无论怎么点击一个图标都不会弹出对应的遮罩层,但是把示列代码拷贝过来又可以正常显示:结果是由于在复制的时候把 # 号弄掉了

错误操作展示:

  1. <a href="javascript:;" class="tl-tag-right open-popup" data-target="half"><img class="tl-xl-15 " src="../res/image/xll.png"></a>

正确使用的步骤:

  1. <a href="javascript:;" class="tl-tag-right open-popup" data-target="#half"><img class="tl-xl-15 " src="../res/image/xll.png"></a>
  2.  
  3. //加入样式 和自定义的标签 open-popup data-target="#half"
  4.  
  5. //第二部 引入需要展示的遮罩层和显示组件
  6.  
  7. <div id="half" class='weui-popup__container popup-bottom'>
  8. <div class="weui-popup__overlay"></div>
  9. <div class="weui-popup__modal">
  10. <div class="toolbar">
  11. <div class="toolbar-inner">
  12. <a href="javascript:;" class="picker-button close-popup">关闭</a>
  13. <h1 class="title">标题</h1>
  14. </div>
  15. </div>
  16. <div class="modal-content">
  17. <div class="weui-grids">
  18. <a href="javascript:;" class="weui-grid js_grid" data-id="dialog">
  19. <div class="weui-grid__icon">
  20.  
  21. </div>
  22. <p class="weui-grid__label">
  23. 发布
  24. </p>
  25. </a>
  26. <a href="javascript:;" class="weui-grid js_grid" data-id="progress">
  27. <div class="weui-grid__icon">
  28.  
  29. </div>
  30. <p class="weui-grid__label">
  31. 编辑
  32. </p>
  33. </a>
  34. <a href="javascript:;" class="weui-grid js_grid" data-id="msg">
  35. <div class="weui-grid__icon">
  36.  
  37. </div>
  38. <p class="weui-grid__label">
  39. 保存
  40. </p>
  41. </a>
  42.  
  43. </div>
  44. </div>
  45. </div>
  46. </div>

jqweui Popup 使用说明的更多相关文章

  1. DevExpress控件使用系列--ASPxGridView+Popup+Tab

      1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxGridView                http ...

  2. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  3. awk使用说明

    原文地址:http://www.cnblogs.com/verrion/p/awk_usage.html Awk使用说明 运维必须掌握的三剑客工具:grep(文件内容过滤器),sed(数据流处理器), ...

  4. 关于淘宝店铺装修弹出层popup的记录

    小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...

  5. “我爱背单词”beta版发布与使用说明

    我爱背单词BETA版本发布 第二轮迭代终于画上圆满句号,我们的“我爱背单词”beta版本已经发布. Beta版本说明 项目名称 我爱背单词 版本 Beta版 团队名称 北京航空航天大学计算机学院  拒 ...

  6. Oracle 中 union 和union all 的简单使用说明

    1.刚刚工作不久,经常接触oracle,但是对oracle很多东西都不是很熟.今天我们来了解一下union和union all的简单使用说明.Union(union all): 指令的目的是将两个 S ...

  7. 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  8. WPF Popup 控件导致被遮挡内容不刷新的原因

    WPF Popup 控件导致被遮挡内容不刷新的原因 周银辉 今天在写一个WPF控件时用到了Popup控件,很郁闷的情况是:当popup关闭时,原来被popup挡住的界面部分不刷新,非要手动刷新一下(比 ...

  9. Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

随机推荐

  1. js判断radio选中状态

    var radios = document.getElementsByName("radiosName"); var checked = false; for ( var j = ...

  2. 洛谷 P1199 三国游戏 题解

    每日一题 day18 打卡 Analysis 贪心 假如小A先选最大的[5,4],虽然电脑必须选一个破坏, 我们可以理解为5和4都属于小A的,假如后面未被破坏的最大值无论是和5相关还是和4相关,必然还 ...

  3. postgreSQL \timing 查看SQL执行时间

    postgreSQL中,关于查询执行时间的\timing的使用

  4. jsp文件上传下载组件

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...

  5. learning java Math类

    output: //取整,返回小于目标数的最大整数System.out.println(Math.floor(-1.2));// 取整,返回在于目标数的最大整数System.out.println(M ...

  6. Open Judge 1.4 09

    09:判断能否被3,5,7整除 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个整数,判断它能否被3,5,7整除,并输出以下信息:1.能同时被3,5,7整除(直接输出3 5 ...

  7. PHP查询oracle数据显示乱码问题

    1.Linux下 执行前脚本前先执行一下命令export NLS_LANG="SIMPLIFIED CHINESE_CHINA.AL32UTF8" 2.Windows下在代码里添加 ...

  8. (2)Go基本数据类型

    Go语言的基本类型有: bool string int.int8.int16.int32.int64 uint.uint8.uint16.uint32.uint64.uintptr byte // u ...

  9. linux服务器时间乱码问题解决

    问题现象如下: [root@ip-171-21-36-129 testcase]# date 2019Ū 08Ղ 02ɕ чǚϥ 09:44:48 UTC 解决步骤: 1.执行命令:vi /etc/s ...

  10. SQL Server 2008R2安装

    SQL Server 2008详细安装过程及配置   https://www.cnblogs.com/rewwensoftware/p/9580697.html SQL Server 2008R2 百 ...