대화상자를 만드는 방법은 엄청 간단합니다.

 

대화상자 또는 다이얼로그 팝업 이라고 할 수 있고 사용 방법은 페이지를 이동하는 링크에 data-rel="dialog" 속성만 추가하면 사용가능합니다.

 



 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
 
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
 
</head>
<body>
 
<section id="page1" data-role="page">
    <header data-role="header"><h1>jQuery Mobile</h1></header>                   
    <div class="content" data-role="content">
        <p>1 page</p>
        <p><a href="#page2" data-rel="dialog">go page2</a></p>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
<section id="page2" data-role="page">
    <header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
    <div class="content" data-role="content">
        <p>2 page</p>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
 
 
</body>
</html>
cs

 

 

 

 

 

 



 

대화상자 ( 다이얼로그 팝업 ) 은 modal 대화상자로서 해스토리 해쉬에는 저장되지 않습니다.

그러므로 다이얼로그에서 다른 페이지로 이동 후 뒤로가기를 실행해도 다이얼로그로 돌아가지 않습니다.

아래 소스를 실행해보세요

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
 
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
 
</head>
<body>
 
<section id="page1" data-role="page">
    <header data-role="header"><h1>jQuery Mobile</h1></header>                   
    <div class="content" data-role="content">
        <p>1 page</p>
        <p><a href="#page2" data-rel="dialog">go page2</a></p>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
<section id="page2" data-role="page">
    <header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
    <div class="content" data-role="content">
        <p>2 page</p>
        <p><a href="#page3">go page3</a></p>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
<section id="page3" data-role="page">
    <header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
    <div class="content" data-role="content">
        <p>3 page</p>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
</body>
</html>
cs

 

 

 

ps : 다이얼로그에서 닫기 버튼을 직접 구현할 때에는 a 태그에 data-rel="back" 속성만 주면 된다.

1
<a class="ui-shadow ui-btn ui-corner-all ui-mini" data-rel="back">취소</a>
cs
by 개발자 CofS 2016.03.11 11:16