JQuery Mobile 모달창

Modal Window in jQuery Mobile
jQuery모바일 모달창

1 jqm_ex05.php[ | ]

<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
	<title>JQM 예제 05</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body> 
<section id="first" data-role="page">
	<header data-role="header">
		<h1>페이지 헤더</h1>
	</header>
	<div data-role="content" class="content">
		<p>버튼 테마 예시</p>
		<a href="jqm_ex05_modal.php" data-rel="dialog">모달창 열기</a>
	</div>
	<footer data-role="footer">
		<h4>페이지 푸터</h4>
	</footer>
</section>
</body>
</html>

2 jqm_ex05_modal.php[ | ]

<section id="modalpage" data-role="page">
	<header data-role="header">
		<h1>대화창 헤더</h1>
	</header>
	<div data-role="content" class="content">
		<p>대화창 내용</p>
	</div>
	<footer data-role="footer">
		<h4>대화창 푸터</h4>
	</footer>
</section>

예제: http://zetawiki.com/ex/jquery-mobile/jqm_ex05.php

3 같이 보기[ | ]