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
| | |||||||||||||
|
|