jquery mobile 弹窗(一)
来源:互联网 发布:中国网络安全法 编辑:程序博客网 时间:2024/06/07 17:06
在jquery mobile中,可以设置弹窗,弹窗可以覆盖在页面上展示的。弹窗可以显示一段文本,图片,或其他内容。
1.创建弹窗
创建一个弹窗需要<a>和<div>元素,点击<a>标签弹出窗口,对a标签要添加
data-rel="popup" 属性。<div> 中的内容为弹窗显示的内容,<div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id, 然后设置 <a> 的 href 值为 <div> 指定的 id。
运行结果:
点击弹出窗口按钮,会弹出如下图所示的窗口
2.关闭弹窗
默然情况下,点击页面弹窗以外的其他位置或按下esc键,可以关闭弹窗。如果你不想采用这种默认的方法来关闭弹窗,可以在弹窗上添加关闭按钮,按钮上使用 data-rel="back" 属性,并通过样式来控制按钮的位置。
运行结果:
点击弹出窗口按钮,弹窗的右侧出现一个删除按钮“x”
3.改变弹出位置
默认情况下,弹出会直接显示在点击元素的上方,如果我们想控制弹出的位置,可以在用于打开弹窗的点击链接上使用 data-position-to 属性。
如果设置弹窗显示在页面中间,只需要设置data-position-to="window",也可以设置窗口显示在指定元素的位置上,设置data-position-to的值为该元素的id或class即可。
运行结果:
点击在window显示窗口按钮
点击在id=“test”元素上显示按钮
0 0
- jquery mobile 弹窗(一)
- jQuery.mobile使用(一)
- jQuery Mobile学习(一)
- Jquery mobile 总结(一)
- jQuery Mobile基础教程(一)
- HTML5与JQuery.Mobile(一)
- jQuery Mobile (一)hello jquerymobile
- jQuery Mobile 学习笔记(一)
- jQuery Mobile笔记一
- jQuery Mobile笔记一
- jQuery Mobile笔记一
- jQuery Mobile 学习一
- jquery-mobile(一)
- jquery mobile 按钮(一)
- 【jQuery Mobile学习】jQuery Mobile页面(一)
- jQuery-Mobile学习(弹窗)
- jquery mobile 弹窗(二)
- jQuery Mobile 前端笔记一
- spring boot快速入门
- ios 核心动画-------跳动效果的实现,旋转效果的实现
- 关于BAYES判别的一点理解
- lletcode-236. Lowest Common Ancestor of a Binary Tree
- redis命令详解与使用场景举例——List
- jquery mobile 弹窗(一)
- 互联网公司数据分析/挖掘面试机器学习面到的题目
- gcc编译选项和makefile资源汇总
- LeetCode: Top K Frequent Elements
- (XGBoost)提升树入门介绍(Inrtoduction to Boosted Trees)
- English about computer 1
- Django学习6-mysql数据库使用1-安装与连接
- AlertDialog使用自定义的布局
- CSS属性选择器