我们继续讲解jquery操作事件中，js设计覆盖面板，常用于点击弹出网站栏目的效果。还有设计单页相册，类似一个手机版图片列表的页面
1.设计覆盖面板
<!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>
$('#popupOverlayPanel').live('popupbeforeposition', function(){
var h = $(window).height();
$("#popupOverlayPanel").css("height", h);
});
</script>
<style type="text/css">
#popupOverlayPanel-popup {
right: 0 !important;
left: auto !important;
}
#popupOverlayPanel {
width: 200px;
border: 1px solid;
border-right: none;
background: rgba(0,0,0,.4);
margin: -1px 0;
}
#popupOverlayPanel .ui-btn { margin: 2em 15px; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>使用弹出页面</h1>
</div>
<div data-role="content">
<a href="#popupOverlayPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button" data-inline="true"> 弹出覆盖面板 </a>
<div data-role="popup" id="popupOverlayPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
<button data-theme="b" data-icon="back" data-mini="true">返回</button>
<button data-theme="b" data-icon="grid" data-mini="true">菜单</button>
<button data-theme="b" data-icon="plus" data-mini="true">添加</button>
</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">
<a href="#popup_1" data-rel="popup" data-position-to="window">
<img src="//freemuban.com/js/511/p1.jpg" style="width:49%">
</a>
<a href="#popup_2" data-rel="popup" data-position-to="window">
<img src="//freemuban.com/js/511/p2.jpg" style="width:49%">
</a>
<a href="#popup_3" data-rel="popup" data-position-to="window">
<img src="//freemuban.com/js/511/p3.jpg" style="width:49%">
</a>
<a href="#popup_4" data-rel="popup" data-position-to="window">
<img src="//freemuban.com/js/511/p4.jpg" style="width:49%">
</a>
<a href="#popup_5" data-rel="popup" data-position-to="window">
<img src="//freemuban.com/js/511/p5.jpg" style="width:49%">
</a>
<a href="#popup_6" data-rel="popup" data-position-to="window">
<img src="//freemuban.com/js/511/p6.jpg" style="width:49%">
</a>
<div data-role="popup" id="popup_1">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="//freemuban.com/js/511/p1.jpg" style="max-height:512px;" alt="pic1">
</div>
<div data-role="popup" id="popup_2">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="//freemuban.com/js/511/p2.jpg" style="max-height:512px;" alt="pic2">
</div>
<div data-role="popup" id="popup_3">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="//freemuban.com/js/511/p3.jpg" style="max-height:512px;" alt="pic3">
</div>
<div data-role="popup" id="popup_4">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="//freemuban.com/js/511/p4.jpg" style="max-height:512px;" alt="pic4">
</div>
<div data-role="popup" id="popup_5">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="//freemuban.com/js/511/p5.jpg" style="max-height:512px;" alt="pic5">
</div>
<div data-role="popup" id="popup_6">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="//freemuban.com/js/511/p6.jpg" style="max-height:512px;" alt="pic6">
</div>
</div>
</body>
</html>
