一、弹框

代码：

<!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. Uep的保存操作

    wzStoreInfoDefineService.update(neWzStoreInfo,updateList,insertList,deleteListpublic void update(WzS ...

  2. 转 Go语言基本类型 —— 字符类型

    https://blog.csdn.net/FHD994603831/article/details/92435724 字符类型Golang中没有专门的字符类型,如果要存储单个字符(字母),一般使用b ...

  3. PDFCrop裁剪PDF文档使用方法

    使用VISIO画图,然后生成PDF文档插入到LaTeX文档中,会出现黑边框的问题.通过对PDF文件进行裁剪可以去掉黑边框,之前我是通过Acrobat进行裁剪,后来激活失效了..只好找其他方法.今天发现 ...

  4. Ruby小白入门笔记之<Rubymine工具的快捷键>

    智能快捷 Ctrl+Alt+G:弹出Generate Ctrl+Alt+L:格式化代码 Alt+F1:切换视图(Project, Structure, etc.). Alt+F2:弹出预览窗口,可选择 ...

  5. 调整Linux终端显示分辨率

    linux 默认cli (command line interface)分辨率一般都比较小,显示的字体很大,不太美观,有时还影响结果的显示(例如出现kernel panic).所以有必要改变一下cli ...

  6. 实现Servlet接口

    1 右键项目->Build Path->Configure Build Path 2 Add Library...->Server Runtime 3 Apache Tomcat-& ...

  7. 【翻唱】学习日语歌 （青鸟）火影忍者 OP

    我的翻唱:https://node.kg.qq.com/play?s=Q1cY4PQ2-2VP6QOM&g_f=personal 中文音译: 哈巴哒伊哒啦 摸多啦呐伊哆伊迭 内杂西耷诺哇 啊哦 ...

  8. 写一个比较全的进制转换函数--ic

    //写一个比较全的进制转换函数-----未完成 #include <stdio.h> //D进制转换后 (比如10-2进制) 结果可能会很大 需要很长的字符串来存 #include < ...

  9. 【机器学习入门笔记】第 2 课：SVM

    Support Vector machines 为什么人们称一种算法为机器,我也不知道(俄罗斯人发明) 粗略的来说,支持向量机所做的就是去寻找分割线(separating) 或者通常称之为超平面,介于 ...

  10. 【计算机视觉】ViBe - a powerful technique for background detection and subtraction in video sequences

    转自:http://blog.csdn.net/stellar0/article/details/8777283 作者:星zai ViBe算法:ViBe - a powerful technique ...