weui popup的简单使用

weui popup链接

使用步骤

引入需要的js文件

    <script src="/static/js/jquery-2.1.4.js"></script><script src="/static/js/jquery-weui.js"></script>

html页面

点击出现的dom

    <div class="tl-tag-right open-popup station_popup" data-target="#half">html点击的地方</div>

弹出框的dom(和点击出现的dom同级)

<div id="half" class='weui-popup__container popup-bottom'><div class="weui-popup__overlay"></div><div class="weui-popup__modal"><div class="toolbar"><div class="toolbar-inner"><a href="javascript:;" class="picker-button close-popup">关闭</a><h1 class="title">标题</h1></div></div><div class="modal-content"><div class="weui-grids"><a href="javascript:;" class="weui-grid js_grid" data-id="dialog"><!-- 可有无可 --><div class="weui-grid__icon"></div><p class="weui-grid__label">发布</p></a><a href="javascript:;" class="weui-grid js_grid" data-id="progress"><!-- 可有无可 --><div class="weui-grid__icon"></div><p class="weui-grid__label">编辑</p></a><a href="javascript:;" class="weui-grid js_grid" data-id="msg"><!-- 可有无可 --><div class="weui-grid__icon"></div><p class="weui-grid__label">保存</p></a></div></div></div></div>

肯定是可以用的，效果图就不放了

weui popup的使用相关推荐

微信小程序，引入WeUI组件库扩展组件库
小程序扩展组件库 | 微信开放文档微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库的方式引入,这种方式引入的组件将不会计入代码包大小. 可以通过npm方式下载构建 ...
微信WeUI扩展组件
主要包括下拉刷新pullToRefresh downRefresh.html 主要的代码是$(document.body).pullToRefresh(); <div class=" ...
微信WeUI常见页面模板
购物车模板就是popup弹层(css样式+js),还有slider滑动操作,还有增减的js 代码: <!DOCTYPE html> <html lang="zh-CN&q ...
微信公众账号开发利器 - jQuery WeUI V0.6.0 发布
jQuery WeUI 是一个专门为对微信公众账号开发的一套UI库,它包含了 WEUI 的全部组件,另外还拓展了大量的常用组件,包括下拉刷新.滚动加载.日历.select 等. jQuery WeUI ...
OpenLayers 动态添加标记（Marker）和信息窗（Popup）
方式一:使用marker方式 1.在地图上添加标记图层 var markers =newOpenLayers.Layer.Markers("Markers"); map.addLa ...
Web的桌面提醒（Popup）
大多数Windows程序都有桌面提醒(Popup)功能,如Msn Messenger,Outlook2003,FoxMail,SharpReader等,对用户来说可以非常的方便最新的信息. 在Web中 ...
vanpopup 高度_解决VantUI popup 弹窗不弹出或无蒙层的问题
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件: popup1show: true 即弹窗显示 :title="popupTitle.popup ...
wpf popup 最前面_【第1988期】NutUI 组件 popup 源码分析
前言 NutUI专题文来了.今日早读文章由京东用户体验设计部@杨凯旋投稿分享. 京东用户体验设计部-前端开发部现有前端开发人员 50 左右,主要为京东零售集团.京东健康提供 WEB 前端开发.APP ...
weui 弹出 $.toast(“我是文本“,“text“)；总是带有图标
在前段代码中引入 weui.css ,weuix.css 和js jquery-weui.min.js就可以使用weui的一些样式了按照官方的文档中 $.toast("我是文本" ...

weui popup的使用

weui popup的简单使用

使用步骤

weui popup的使用相关推荐

最新文章

热门文章