BOTOESCOMEFEITOS

<!
doctype html>
<html class="no-js" lang="pt-br">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Livro Foundation do Maujor | Janelas modais</title>
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/foundation.min.css">
<link rel="stylesheet" href="../css/exemplos.css">
<script src="../js/vendor/modernizr.js"></script>
</head>
<body>
<div class="tudo">
<h1 class="capitulo">Capítulo 4 — Callouts & Prompts</h1>
<h2 class="meu-h2 pagination-centered">Janelas modais</h2>
<div class="row">
<div class="large-2 columns">
<h2 class="meu-h2">Janela modal básica</h2>
<a href="#" data-reveal-id="mbasica">João Dias Solis</a>
</div>
<h2 class="meu-h2 pagination-centered">Janela modal intermediária</h2>
<div class="row">
<h2 class="meu-h2">Modal em modal</h2>
<a href="#" data-reveal-id="modal1" class="radius
button tiny">São Francisco do Sul</a>
</div>
<h2 class="meu-h2">Modal com vídeo</h2>
<a href="#" data-reveal-id="mvideo" class="radius
alert small button">Ver vídeo…</a>
</div>
</div>
</div>
<h2 class="meu-h2">Janela modal avançada</h2>
<div class="row">
<h2 class="meu-h2">Largura 30%</h2>
<p><a href="#" data-reveal-id="trinta" class="button
tiny radius secondary">Abrir janela</a></p>
</div>
<h2 class="meu-h2">Modal AJAX</h2>
<button class="radius success tiny" data-reveal-
id="ajax" data-reveal-ajax="modal-ajax.html">Button AJAX</button>
<a href="modal-ajax.html" data-reveal-id="ajax1" data-reveal-
ajax="true" class="radius success tiny button">Link AJAX</a>
</div>
</div>
</div>
<p>Nota: A modal com vídeo requisita um vídeo do Youtube e no seu HD local só
funcionará se você estiver online. A modal AJAX não funciona localmente se os
arquivos não estiverem hospedados em um servidor local.</p>
</div> 
<hr>
<div class="row">
<h2 class="meu-h2">Janela modal para imagens</h2>
<p><a href="#" data-reveal-id="imagem"><img src="igreja-thumb.jpg"
alt="Igreja Matriz São Francisco do Sul"></a></p>
</div>
</div> 

<div id="mbasica" class="reveal-modal" data-reveal>
<h3>João Dias Solis</h3>
<p>Cerca de onze anos após a teórica passagem de Binot Paulmier de Gonneville
pela Ilha de São Francisco do Sul, outra expedição chefiada pelo célebre navegador
espanhol Juan Días de Solís com a intenção de encontrar uma passagem para as
Molucas (Índias Orientais) pelo sul da América, chegou à baía a qual os nativos
chamavam de Babitonga, dando o nome de São Francisco ao local. Esse nome
permaneceu, sendo depois estendido a povoação, e mais tarde, com a fundação às
margens da baía de uma cidade com o mesmo nome.</p>
<small>Fonte: Wikipedia</small>
<a class="close-reveal-modal">×</a>
</div>

<div id="modal1" class="reveal-modal" data-reveal>
<h3>São Francisco do Sul</h3>
<p>São Francisco do Sul é um município brasileiro do estado de Santa
Catarina.</p>
<p>Localiza-se a uma latitude 26º14'36" Sul e a uma longitude 48º38'17" Oeste,
estando a uma altitude de nove metros. Sua população em 2010 era de 42.569
habitantes3 . Possui uma área de 493 km<sup>2</sup>.</p>
<p>A sede do município está localizada na margens da Baía da Babitonga, ao
norte da Ilha de São Francisco do Sul a uma distância de 14 km da entrada da
barra.</p>
<p><a href="#" data-reveal-id="modal2" class="success round small
button">Baía da Babitonga.</a></p>
</div>
<div id="modal2" class="reveal-modal" data-reveal>

<h3>Baía da Babitonga</h3>
<p>A Baía da Babitonga é uma baía do litoral brasileiro. Esta baía está
situada na foz do rio Palmital, junto a duas importantes cidades: Joinville e a
ilha de São Francisco do Sul.</p>
<p>A Baía da Babitonga já era habitada há mais de 3.000 anos por caçadores e
coletores sambaquianos, os homens do sambaqui. No século XV e XVI se registra a
ocupação da baía por grupos Tupi-guarani, denominados Carijó, que há algumas
centenas de anos antes se sobrepuseram culturalmente àqueles grupamentos
sambaquianos ancestrais.</p>
</div>

<div id="mvideo" class="reveal-modal large" data-reveal>
<h3>Estude padrões web</h3>
<div class="flex-video">
<iframe width="560" height="315" src="http://www.youtube.com/embed/xbA-
jwKzZR0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

<div id="trinta" class="reveal-modal tiny" data-reveal>
<h3>João Dias Solis</h3>
<p>Cerca de onze anos após a teórica passagem de Binot Paulmier de Gonneville
pela Ilha de São Francisco do Sul, outra expedição chefiada pelo célebre navegador
espanhol Juan Días de Solís com a intenção de encontrar uma passagem para as
Molucas (Índias Orientais) pelo sul da América, chegou à baía a qual os nativos
chamavam de Babitonga, dando o nome de São Francisco ao local. Esse nome
permaneceu, sendo depois estendido a povoação, e mais tarde, com a fundação às
margens da baía de uma cidade com o mesmo nome.</p>
</div>

<div id="ajax" class="reveal-modal" data-reveal></div>
<div id="ajax1" class="reveal-modal" data-reveal></div>

<div id="imagem" class="reveal-modal tiny" data-reveal>
<h3>Igreja matriz de São Francisco do Sul</h3>
<img src="igreja.jpg" alt="Igreja Matriz São Francisco do Sul">
</div>

<p class="navegacao"><a href="4.4.html">«</a> <a
href="../c5/5.1.html">»</a></p>
</div> 
<script src="../js/vendor/jquery.js"></script>
<script src="../js/vendor/fastclick.js"></script>
<script src="../js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

BOTOESCOMEFEITOS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

BOTOESCOMEFEITOS

Enviado por

Direitos autorais:

Formatos disponíveis

<!

<div id="modal2" class="reveal-modal" data-reveal>

Você também pode gostar