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

相关文章推荐

fancybox 弹窗插件

  • 2017年11月08日 16:24
  • 617KB
  • 下载

JQmobile实现的订餐webAPP

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

纯JavaScript弹窗效果

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

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

  • 2017年07月16日 16:02
  • 1.42MB
  • 下载

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

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

jw_player 弹窗播放器

  • 2016年10月12日 18:27
  • 251KB
  • 下载

好用的弹窗插件

  • 2015年12月23日 10:59
  • 15KB
  • 下载

JQMobile中的页面与对话框

1.关于page容器 在page容器内,可以使用任何有效的html标签,但是page容器的直接子节点需要使用data-role标记属为“header”“content”“footer”的三个容器。 ...

外星破解绿色版无弹窗

  • 2015年06月06日 15:42
  • 70KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jqmobile弹窗
举报原因:
原因补充:

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