我们继续讲解jquery操作事件中，js定义切换动画,js定义主题样式,js定义关闭按钮，比如以中央弹出动画，
1.js定义切换动画,中央弹出动画
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>定制弹出页面</h1>
</div>
<div data-role="content">
<a href="#window" data-rel="popup" data-role="button" data-transition="pop">
以中央弹出动画</a>
<div class="ui-content" id="window" data-role="popup" data-theme="d">
<img src="//freemuban.com/js/511/1.jpg" id="pic" style="max-height:300px;" />
</div>
</div>
</div>
</body>
</html>
2.定义主题样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>定制弹出页面</h1>
</div>
<div data-role="content">
<a href="#window" data-rel="popup" data-role="button" data-position-to="window">
定义弹出页面主题</a>
<div class="ui-content" id="window" data-role="popup" data-overlay-theme="a" data-theme="e" >
<p>使用data-theme属性设置弹出页面自身的主题和色板。</p>
<p>使用data-overlay-theme设置弹出页面周边的背景颜色。</p>
</div>
</div>
</div>
</body>
</html>
3.定义关闭按钮，给图片在右上角添加一个关闭按钮
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>定制弹出页面</h1>
</div>
<div data-role="content">
<a href="#window" data-rel="popup" data-role="button" data-position-to="window">
添加关闭按钮</a>
<div id="window" data-role="popup" data-dismissible="false">
<a class="ui-btn-right" href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext">Close</a>
<p><img src="//freemuban.com/js/511/1.jpg" style="max-height:300px;"/></p>
</div>
</div>
</div>
</body>
</html>
