我们继续讲解jquery操作事件中，手机版里面登录和对话框效果，点击按钮弹出登录操作，输入帐号，密码等。点击弹出对话框，用户确认继续或者返回。点击图片弹出可以关闭的图片按钮效果。
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>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>使用弹出页面</h1>
</div>
<div data-role="content">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" href="#popupLogin" data-transition="pop" data-rel="popup" data-position-to="window">请登录</a>
<div class="ui-corner-all" id="popupLogin" data-role="popup" data-theme="a">
<form>
<div style="padding: 10px 20px;">
<h3>登录</h3>
<label class="ui-hidden-accessible" for="un">用户名:</label>
<input name="user" id="un" type="text" placeholder="用户名" value="" data-theme="a">
<label class="ui-hidden-accessible" for="pw">密 码:</label>
<input name="pass" id="pw" type="password" placeholder="密码" value="" data-theme="a">
<button class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check" type="submit">确定</button>
</div>
</form>
</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 class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b" href="#popupDialog" data-transition="pop" data-rel="popup" data-position-to="window">弹出对话框</a>
<div id="popupDialog" style="width: 300px;" data-role="popup" data-theme="b" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<h1>对话框标题</h1>
</div>
<div class="ui-content" role="main">
<h3 class="ui-title">提示信息</h3>
<p>说明文字</p>
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" href="#" data-rel="back">取消</a>
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" href="#" data-transition="flow" data-rel="back">返回</a>
</div>
</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="#pic" data-transition="fade" data-rel="popup" data-position-to="window">
<img style="width: 30%;" src="//freemuban.com/js/511/1.jpg">
</a>
<div id="pic" data-role="popup" data-theme="b" data-corners="false" data-overlay-theme="b">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img style="max-height: 512px;" src="//freemuban.com/js/511/1.jpg">
</div>
</div>
</div>
</body>
</html>
demo2
<!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>
$(document).on("pageinit",function(){
$("#pic").on({
popupbeforeposition:function(){
var maxHeight=$(window).height()-50 + "px";
$("#pic img").css("max-height",maxHeight);
}
})
})
</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="#pic" data-transition="fade" data-rel="popup" data-position-to="window">
<img style="width: 30%;" src="//freemuban.com/js/511/1.jpg">
</a>
<div id="pic" data-role="popup" data-theme="b" data-corners="false" data-overlay-theme="b">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img style="max-height: 512px;" src="//freemuban.com/js/511/1.jpg">
</div>
</div>
</div>
</body>
</html>
