|
|
| Linha 37: |
Linha 37: |
| | <html> | | <html> |
| | <body> | | <body> |
| − | <a href=" https://wiki.elitesoft.com.br/index.php/Modulo_Web" rel="modal"><img alt="Admin.jpg" src="http://wiki.elitesoft.com.br/images/thumb/f/f8/Web.png/100px-Web.png" width="100" height="100" /></a><br> | + | <a href=" #janela2" rel="modal"><img alt="Admin.jpg" src="http://wiki.elitesoft.com.br/images/thumb/f/f8/Web.png/100px-Web.png" width="100" height="100" /></a><br> |
| | </body> | | </body> |
| | </html> | | </html> |
| Linha 49: |
Linha 49: |
| | <br> | | <br> |
| | <html> | | <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() /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>
| |
| − | <td style="border:1px solid #a7d7f9; border-radius: 10px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.35)">
| |
| − | <table style="width:100%; margin-bottom:2px; vertical-align:top; font-size:95%; background:transparent;">
| |
| − |
| |
| | | | |
| | <tr> | | <tr> |
