Jqmobile弹窗

原创 2015年11月19日 22:53:42

1.标示

caicongyang:http://blog.csdn.net/caicongyang

2.代码

<!DOCTYPE html>
<html>
  <head>
    <title>popup.html</title>
  	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
	<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	</head>
  
  <body>
   <div id="pageone" data-role="page" >
   	<!-- 低版本写法 -->
	<a href="#alert-dialog" data-role="button" data-inline="true">弹窗</a>
	<a href="javascript:alertConfirm();" data-role="button" data-inline="true">提示框</a>
	
	<!-- 高版本写法 --> 
    <a href="#myPopup" data-rel="popup" data-role="button" class="ui-btn ui-btn-inline ui-corner-all"  data-position-to="window">提示弹窗</a>
	<a href="#myPopupDialog" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="window" data-overlay-theme="b">对话框弹窗</a>

	<div data-role="popup" id="myPopupDialog">
	  <div data-role="header"><h1>头部文本..</h1></div>
	  <div data-role="main" class="ui-content"><p>一些文本..</p><a href="#">一些链接..</a>
	  <div data-role="footer"><h1>底部文本..</h1></div>
	</div>
	</div>

    <div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="b">
      <p>我是提示弹窗!</p>
    </div>
	  
	</div>
	
	<div data-role="dialog" id="alert-dialog">
	    <div data-role="header">
	       <h1>提示信息</h1>
	    </div>
	    <div data-role="content">
	        <p>您现在查看的内容:dialog基础</p>
	        <p>由@caicongyang制作完成</p>
	        <p>希望能够帮助到您</p>
	    </div>
	</div>
	
	
  </body>
  <script type="text/javascript">
  	//引入外置的页面作为弹窗
  	function alertConfirm(){
		$.mobile.changePage("confirm.html",{
			transition:"pop",
			reverse:false,
			changeHash:false
		});
	}
  </script>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。--caicongyang

jQuery mobile 学习06 提示框和确认框

jQuery mobile 学习06 提示框和确认框
  • responsecool
  • responsecool
  • 2015年02月26日 17:41
  • 2707

android实现弹窗的方式汇总

近期公司人事调整,自己也从之前的基础部门转到了商业产品部门,整体的业务有了不小的变动,最近阅读相关业务代码的时候,发现商业方向的产品需求较多的涉及android的弹窗,所以自己有必要在这里做以总结和整...
  • a910626
  • a910626
  • 2016年06月02日 13:55
  • 6692

iOS自定义弹窗(UIView)

iOS自定义弹窗(UIView) 效果: 解决: 1. 先放一层 黑色 50%透明度的背景 , 再放弹窗,再在弹窗上放置自定义。 //===========...
  • u011263484
  • u011263484
  • 2016年05月09日 15:25
  • 1138

JQMobile中的页面与对话框

1.关于page容器 在page容器内,可以使用任何有效的html标签,但是page容器的直接子节点需要使用data-role标记属为“header”“content”“footer”的三个容器。 ...
  • mimikuer
  • mimikuer
  • 2014年11月27日 14:45
  • 734

TutorialsPoint iBatis Ionic Jackson IP jQMobile jQUI Laravel IDEA Jenkins 教程

  • 2017年07月04日 17:16
  • 18.49MB
  • 下载

JQMobile(Jquery一样能用)中如何获得远程的json数据并绑定

获得的步骤,主要和jquery类似, 1.首先使用$.ajax的方法发送参数, 2.传回json数据后,将数据与模板一一mapping 3.最后将返回的数据与dom绑定即可 代码如下:...
  • xiaoguang44
  • xiaoguang44
  • 2012年02月20日 15:14
  • 2641

JQmobile实现的订餐webAPP

学习一段JQmobile后,用来实现一个简单的订餐webAPP,本应用功能十分简单,用户能够进行注册,登录,并且能下订单,和查看订单,取消订单,数据利用本地存储localStore和IndexDB,不...
  • wjb820728252
  • wjb820728252
  • 2017年05月07日 23:20
  • 223

span 鼠标移上动画提示弹窗

  • 2018年01月09日 13:19
  • 3KB
  • 下载

纯JavaScript弹窗效果

  • 2016年08月17日 22:03
  • 169KB
  • 下载

zTree树结构包,与jBox弹窗的包

  • 2017年07月16日 16:02
  • 1.42MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jqmobile弹窗
举报原因:
原因补充:

(最多只允许输入30个字)