Mudanças entre as edições de "Página principal"
(alteração do texto) |
(alteração do texto) |
||
| Linha 44: | Linha 44: | ||
|- | |- | ||
| − | ! [[ | + | ! [[Modulo_Web]] |
| | | | ||
! | ! | ||
| Linha 122: | Linha 122: | ||
<a href="#janela2" rel ="modal">Web</a> | <a href="#janela2" rel ="modal">Web</a> | ||
| + | <head> | ||
| + | <title>Janela modal</title> | ||
| + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> | ||
| + | <script type="text/javascript"> | ||
| + | $(document).ready(function(){ | ||
| + | $("a[rel=modal]").click( function(ev){ | ||
| + | ev.preventDefault(); | ||
| + | |||
| + | var id = $(this).attr("href"); | ||
| + | |||
| + | var alturaTela = $(document).height(); | ||
| + | var larguraTela = $(window).width(); | ||
| + | |||
| + | //colocando o fundo preto | ||
| + | $('#mascara').css({'width':larguraTela,'height':alturaTela}); | ||
| + | $('#mascara').fadeIn(1000); | ||
| + | $('#mascara').fadeTo("slow",0.8); | ||
| + | |||
| + | var left = ($(window).width() /3) - ( $(id).width() / 5 ); | ||
| + | var top = ($(window).height() / 4) - ( $(id).height() / 4 ); | ||
| + | |||
| + | $(id).css({'top':top,'left':left}); | ||
| + | $(id).show(); | ||
| + | }); | ||
| + | |||
| + | $("#mascara").click( function(){ | ||
| + | $(this).hide(); | ||
| + | $(".window").hide(); | ||
| + | }); | ||
| + | |||
| + | $('.fechar').click(function(ev){ | ||
| + | ev.preventDefault(); | ||
| + | $("#mascara").hide(); | ||
| + | $(".window").hide(); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | <style type="text/css"> | ||
| + | |||
| + | .window{ | ||
| + | display:none; | ||
| + | width:437px; | ||
| + | height:228px; | ||
| + | position:absolute; | ||
| + | left:0; | ||
| + | top:0; | ||
| + | background:#FFF; | ||
| + | z-index:9900; | ||
| + | padding:10px; | ||
| + | border-radius:10px; | ||
| + | } | ||
| + | |||
| + | #mascara{ | ||
| + | position:absolute; | ||
| + | left:0; | ||
| + | top:0; | ||
| + | z-index:9000; | ||
| + | background-color:#000; | ||
| + | display:none; | ||
| + | } | ||
| + | |||
| + | .fechar{display:block; text-align:right;} | ||
| + | |||
| + | </style> | ||
| + | |||
| + | </head> | ||
| + | |||
| + | |||
| + | <body> | ||
| + | <a href="#janela2" rel ="modal">Web</a> | ||
| + | |||
| + | |||
| + | <div class="window" id="janela1"> | ||
| + | <a href="#" class="fechar">Fechar</a> | ||
| + | <h4>Primeira janela moda</h4> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p> | ||
| + | <p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="window" id="janela2"> | ||
| + | <a href="#" class="fechar">Fechar</a> | ||
| + | <h4>Escolha a sua Opção</h4> | ||
| + | <form action="#" method="post"> | ||
| + | <table style="margin-top:5px; width:45%; margin-bottom:2px;margin-left:auto; margin-right:auto"> | ||
<tr> | <tr> | ||
Edição das 16h24min de 8 de maio de 2019
Mobile
| | |||||||||||||
| ||||||||||||||||||||||||
|
