先创建一个窗体

<div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to="window" data-dismissible="false">
  <a href='javascript:void(0)' 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>
  <div>弹出窗内容<div>
</div>

1)点击后弹出

<a href="#popupView" data-rel="popup" data-transition="flip" class="ui-btn ui-corner-all">按钮</a>

2)页面加载后弹出

//页面延时加载
<script>
setTimeout(function () {
  $("#popupView").popup('open');
}, 1000);//1秒
</script>

关键字说明:

data-overlay-theme: 背景色透明灰
data-position-to: 弹窗在窗口居中显示
data-dismissible: 是否允许单击窗口外任一位置关闭窗口(默认true为允许)
data-transition: 弹出方式
												

jquery Mobile弹出窗的更多相关文章

  1. jQuery制作弹出窗(模态框)

    来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...

  2. jquery ui dialog弹出窗 清空缓存Cache或强制刷新

    我用jquery ui 弹出一个购物车的对话,通过AJAX加载的数据.发现购物车被缓存,一直看到是旧数据.为了刷新购物车更新,我必须去加一个刷新按钮,点击后更新购物车页面.有没有一种方法来自动刷新加载 ...

  3. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  4. bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX

    bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34      阅读:4479      评论:0      收藏:0      [ ...

  5. Bootstrap模态弹出窗

    Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...

  6. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  7. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  8. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  9. iOS:模态弹出窗控制器UIPopoverPresentationController

    模态弹出窗控制器:UIPopoverPresentationController 实质:就是将内容控制器包装成PopoverPresentationController的形式,然后再模态出来,必须指定 ...

随机推荐

  1. XML 与 DataSet/DataTable 互相转换实例(C#)——转载

    // <summary>      /// XML形式的字符串.XML文江转换成DataSet.DataTable格式      /// </summary>      pub ...

  2. checkbox实现单选,全选,反选,取消选

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  3. window route 命令

    使用 Route 命令行工具查看并编辑计算机的 IP 路由表.Route 命令和语法如下所示: route [-f] [-p] [Command][Destination] [mask Netmask ...

  4. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  5. 【转】运行java -version命令时出现错误及解决

    转载地址:http://blog.sina.com.cn/s/blog_50f21fed01012sf2.html     按照上一篇的步骤配置JAVA_HOME.CLASSPATH和Path三个变量 ...

  6. PHP计算时间差,并返回什么时间之前发表的内容

    <?php header("Content-type: text/html; charset=utf-8"); function time2Units ($time){ $y ...

  7. 指定页面配置https(apache/tomcat)

    apache/tomcat服务器下配置https         apache下配置https:             首先在网站根目录下,找到.htaccess文件(如果没有则新建),apache ...

  8. RCP:如何把Preferences中的项从一个类别移动到另一个类别

    前言 很久没写文章了,准备写一系列关于Eclipse RCP /Plugin的文章. 这些文章都是trouble shooting性质的,不准备写的很细,当你碰到这样的问题,google到时,能帮你把 ...

  9. Cheatsheet: 2015 09.01 ~ 09.30

    Web A Guide to Vanilla Ajax Without jQuery Gulp for Beginners A Detailed Walkthrough of ASP.net MVC ...

  10. HQL 参数绑定、唯一结果、分页、投影总结(上)

    我们先总结一下HQL语句常用语法: from子句:; select子句:用于选取对象和属性; where子句:用于表达查询语句的限制条件; 使用表达式:一般用在where子句中; order by子句 ...