JQueryMobile/dialog.html at master · thiagodmm/JQueryMobile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html lang="pt-br">
<html>
	<head>
        <title>Aula 01 - JQuery Mobile - Página de Diálogo</title>
        <meta charset="utf-8" />
        <meta name="author" content="Thiago de Moura Machado" />
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" type="text/css" href="estilo.css" />
        <link rel="stylesheet" href="./themes/tema1.min.css" />
        <link rel="stylesheet" href="./themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" data-dialog="true">

		<div data-role="header" data-theme="b">
		<h1>Abrindo uma página HTML como Modal</h1>
		</div>

		<div role="main" class="ui-content">
		<h1>Pergunta ou informação para o usuário</h1>
		<p>Esta é uma página Html comum, estilizada como Caixa de Diálogo. Para criar um "Dialog", apenas faça um link para uma página Html e inclua uma transição e o atributo <code>data-rel="dialog"</code>.</p>
			<a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Muito bom!</a>
			<a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancelar</a>
		</div>
	</div>

</body>
</html>