■ Front-End ■/jQuery Mobile

[jQuery 모바일] 다이얼로그 화면으로 팝업

한길(One Way) 2023. 2. 11.

모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다.

첫 페이지에서 다음 페이지 이동시 다이얼로그 화면으로 팝업 하는 예제다. 첫 번째 페이지에서 <a href="" 에 삽(#)과 함께 페이지 id를 입력하면 그 페이지로 링크가 연결된다. 그리고 data-rel 속성에 "dialog"라고 값을 주면 페이지를 다이얼로그 화면으로 팝업 한다.

페이지 이동 예제의 코드와 거의 유사하며 data-rel="dialog"가 추가되었다.

아래는 전체 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js" ></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></script>
</head>
 
<body>
    <section id="page1" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>다이얼로그</h1>
        </header>
        <div class="content" data-role="content">
           <p>첫번째 페이지</p>
           <p>
               <a href="#page2" data-rel="dialog" data-transition="flip">두번째 페이지로 이동</a>
           </p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
    <section id="page2" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>다이얼로그</h1>
        </header>
        <div class="content" data-role="content">
           <p>두번째 페이지</p>
           <p>
               <a href="#page3" data-rel="dialog" data-transition="flow">세번째 페이지로 이동</a>
           </p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
    <section id="page3" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>다이얼로그</h1>
        </header>
        <div class="content" data-role="content">
           <p>세번째 페이지</p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
</body>
</html>

jqm_03.html

0.00MB

결과화면

jQuery Mobile에서 알아둘 속성

728x90

저작자표시 비영리

'■ Front-End ■ > jQuery Mobile' 카테고리의 다른 글

[jQuery 모바일] 버튼을 그룹으로 묶어보자 (0)	2023.02.11
[jQuery 모바일] 다양한 모양의 버튼을 만들어보자 (0)	2023.02.11
[jQuery 모바일] 다양한 전환효과를 주며 페이지를 이동 (0)	2023.02.11
[jQuery 모바일] 페이지를 추가하고 페이지를 이동해 보자 (0)	2023.02.11
[jQuery 모바일] 안녕, 제이쿼리 모바일 (Hello, jQuery Mobile) (0)	2023.02.11

[jQuery 모바일] 다이얼로그 화면으로 팝업

'■ Front-End ■ > jQuery Mobile' 카테고리의 다른 글

댓글

티스토리툴바