一、弹框

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<a href="#pop" data-rel="popup" class="ui-btn">弹出窗口</a>
<div data-role="popup" id="pp">
<p>这是一个弹出的窗口</p>
</div>
<!-- 单机按钮后显示原图 -->
<a href="#pop" data-rel="popup" data-position-to="window" data-transition="fade">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2350302849,3323337377&fm=26&gp=0.jpg" class="pupphoto" style="width: 50px">
</a> <div data-role="popup" id="pop">
<a href="#" data-rel="back"
class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">close</a>
<!-- 点击其他地方将当前的对话窗口取消掉date-rel="back" ui-conrer-all为元素添加圆角 shadow加载阴影,
设定主题为a白色,给予图片ui-ico-delete 内容不显示用ui-btn-icon-notext;让按钮显示在右边,ui-btn-right;
ui-btn-可以取值为left right none-->
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1027226132,3015755721&fm=26&gp=0.jpg" class="popphoto" style="height: 440px">
</div>
</body
</html>

jquery-mobile pop的更多相关文章

  1. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  2. jquery mobile 实现自定义confirm确认框效果

    类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js if(confirm('确定删除吗?')) { //执行代码 } 这种效果比较丑,使用jquery m ...

  3. jQuery Mobile的基本使用

    本人是软件开发的初学者,总结了一点点日常所学,记录在此,主要目的是鼓励自己坚持学习,怕有一天忘记了,还能复习曾经学过的知识点. 如有大神路过为我指点迷津,纠正改错更是感激不尽,但请不要喷我这个菜鸟!谢 ...

  4. 【初探移动前端开发05】jQuery Mobile (整合版)

    前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...

  5. 【初探移动前端开发03】jQuery Mobile(上)

    前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...

  6. 使用jQuery Mobile的注意事项(译)

    翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键 ...

  7. jquery mobile 教程

    简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...

  8. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

  9. jQuery Mobile 基础

    第一章 1.页面: <body> <div data-role="page"> <div data-role="header"&g ...

  10. jQuery Mobile高手必备的十大技巧和代码片段

    与任何新技术一样,常常难就难在如何开始入手. 有鉴于此,我们整理出了与jQuery Mobile库有关的我认为最便利的一些技巧.方法和代码片段. 由于本文不是旨在全面介绍使用jQuery Mobile ...

随机推荐

  1. leetcode-easy-listnode-234 Palindrome Linked List

    mycode   89.42% # Definition for singly-linked list. # class ListNode(object): # def __init__(self, ...

  2. OpenCV学习笔记(11)——Canny边缘检测

    了解Canny边缘检测的概念 1.原理 Canny边缘检测是一种非常流行的边缘检测算法,是 John F.Canny在1986年提出的.它是一个有很多步构成的算法 1)噪声去除 使用5*5的高斯滤波器 ...

  3. [python]自动计算1-100的平方和

    def power(x,n): s=1 while n > 0: n = n-1 s = s * x return sm=0for i in range(1,101) : n=power(i,2 ...

  4. maven将自己的springboot项目打包成jar包后,作为工具包引入其他项目,找不到jar中的类

    将springboot项目打包成jar包,作为工具包导入项目后,找不到jar中的类. 原因是:springboot项目使用了自动的打包插件. 原先的插件配置: <build> <pl ...

  5. playbook部署mangodb

    playbook文件 [root@localhost ~]# cat deploy_mongo.yaml --- - hosts: webservers become: yes become_meth ...

  6. A1139-引爆炸弹 计蒜客 bfs剪枝

    题目链接 https://nanti.jisuanke.com/t/A1139 在一个 n \times mn×m 的方格地图上,某些方格上放置着炸弹.手动引爆一个炸弹以后,炸弹会把炸弹所在的行和列上 ...

  7. 【VS开发】【图像处理】 bayer, yuv, RGB转换方法

    因为我的STVxxx USB camera输出格式是bayer格式,手头上只有YUVTOOLS这个查看工具,没法验证STVxxx在开发板上是否正常工作. 网上找了很久也没找到格式转换工具,最后放弃了, ...

  8. lua基础学习(六)

    一.lua协同程序coroutine 1.什么是协同(coroutine)?Lua 协同程序(coroutine)与线程比较类似:拥有独立的堆栈,独立的局部变量,独立的指令指针,同时又与其它协同程序共 ...

  9. Angular5 自定义scrollbar样式之 ngx-malihu-scrollbar

    简介 此插件是 Malihu jQuery Scrollbar 为了在 Angular2+ 环境下使用,封装的一个ts的版本.提供directive和service. 从安装量来看,它比不过 perf ...

  10. python 并发编程 多线程 GIL与Lock

    GIL与Lock Python已经有一个GIL来保证同一时间只能有一个线程来执行了,为什么这里还需要互斥锁lock? 锁的目的是为了保护共享的数据,同一时间只能有一个线程来修改共享的数据 GIT保证了 ...