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 举报

相关文章推荐

返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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