Mudanças entre as edições de "Bizagi:Teste-Diagram 1"
| Linha 1: | Linha 1: | ||
| + | |||
| + | <html> | ||
| + | <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() /2) - ( $(id).width() / 2 ); | ||
| + | var top = ($(window).height() / 2) - ( $(id).height() / 2 ); | ||
| + | |||
| + | $(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:300px; | ||
| + | height:300px; | ||
| + | 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="#janela1" rel="modal">Janela modal</a> | ||
| + | <a href="#janela2" rel ="modal">Janela 2 modal</a> | ||
| + | |||
| + | |||
| + | <div class="window" id="janela1"> | ||
| + | <a href="#" class="fechar">X 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">X Fechar</a> | ||
| + | <h4>Formulario</h4> | ||
| + | <form action="#" method="post"> | ||
| + | {| style="margin-top:5px; width:45%; margin-bottom:2px;margin-left:auto; margin-right:auto" | ||
| + | |style="border:1px solid #a7d7f9; border-radius: 10px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.35)"| | ||
| + | {| style="width:100%; margin-bottom:2px; vertical-align:top; font-size:95%; background:transparent;" | ||
| + | |||
| + | |- | ||
| + | |Colspan="2" style="text-align:center"| | ||
| + | |||
| + | [[Arquivo:Admin.jpg|70px|center|link=Modulo Web - Central Admin]] | ||
| + | ! [[Arquivo:CentralAss.png|70px|center|link=Modulo_Web_-_Central_do_Assinante]] | ||
| + | ! [[Arquivo:networkweb.png|70px|link=Área_de_Trabalho]] | ||
| + | ! [[Arquivo:revenda.png|70px|link=Modulo_Web_-_Revenda]] | ||
| + | ! [[Arquivo:Painel.png|70px|link=Modulo Web - Painel]] | ||
| + | |- | ||
| + | ! [[Modulo Web - Central Admin| Central Admin]] | ||
| + | | | ||
| + | ! [[Modulo_Web_-_Central_do_Assinante|Central Assinante]] | ||
| + | |||
| + | ! [[Área_de_Trabalho|Área de Trabalho Web]] | ||
| + | |||
| + | ! [[Modulo Web - Revenda| Central Revenda]] | ||
| + | |||
| + | ! [[Modulo Web - Painel| Painel de Controle]] | ||
| + | |} | ||
| + | |} | ||
| + | |||
| + | |||
| + | </form> | ||
| + | </div> | ||
| + | |||
| + | <!-- mascara para cobrir o site --> | ||
| + | <div id="mascara"></div> | ||
| + | </body> | ||
| + | </html> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
{| style="margin-top:5px; width:45%; margin-bottom:2px;margin-left:auto; margin-right:auto" | {| style="margin-top:5px; width:45%; margin-bottom:2px;margin-left:auto; margin-right:auto" | ||
|style="border:1px solid #a7d7f9; border-radius: 10px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.35)"| | |style="border:1px solid #a7d7f9; border-radius: 10px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.35)"| | ||
Edição das 11h35min de 28 de março de 2013
X Fechar
Primeira janela moda
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,
Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi.
X Fechar
Formulario
| ||||||||||||
