Abrir Div Oculta como Modal

Front-end
#1

Galera, ja to pra pirar e nao consegui fazer… é o seguinte tenho um JSP com duas div´s, uma de consulta que abre na hora que carrega a pagina, e outra de cadastro que está oculta, queria no momento que clicar no botão cadastrar que esta na div de consulta abra a div cadastro que esta oculta como modal.

Se alguem puder ajudar, vou ficar muito grato.

#2

Adicione no seu botão:

<input type="button" value="Cadastrar" onclick="openDiv('id_div');" />

JS:

function openDiv(id_div){ // código para mostrar sua div... }

Abraço!

#3

Caro Alberthy, entendi o conceito da coisa, agora ficou mais claro como fazer, só não sei o codigo para abrir a div em modal, se voce puder quebar este galho vou agradeçer…

Abraço

#4

jaimbiriba, a div de consulta já está abrindo como modal ou não? Posta o código para abrir a sua div de consulta que fica mais facil para saber como você está fazendo, assim fica meio neblinado.

#5

Não estou na maquina que trabalho, mas quando chegar vou colocar o código, mas a questão é que na verdade todos os que testei da net nenhum fez o que realmente eu estava procurando, seria algo simples, o exemplo colocado anteriormente acredito que é a base para a solução, só não sei como fazer a função JS que ele falou, mas é daquele jeito la. Se alguém souber como completar aquele código vai ser de grande valia.

Abraço

#6

Se ao invés de tu utilizar javascript tu utilizar jquery ficaria mais facil, seria nada mais que isso:

$("#idDaDiv").show(); //aqui seria feito a exibição da div escondida, para esconder basta colocar .hide() ao invés de .show()
#7

Andre, desculpe a pertubação rsrsrs, estou começando agora com jsp, programo em java desktop, este é meu primeiro programa web, já tenho jquery na pagina pois uso para outras funções; Você pode me dar um exemplo de onde colocar este código de maneira que chame clicando em um botão.

Grato

#8

[quote=jaimbiriba]Andre, desculpe a pertubação rsrsrs, estou começando agora com jsp, programo em java desktop, este é meu primeiro programa web, já tenho jquery na pagina pois uso para outras funções; Você pode me dar um exemplo de onde colocar este código de maneira que chame clicando em um botão.

Grato[/quote]

Eu não sou bom em jquery mas da uma olhada nesse codigo que eu fiz aqui bem rapido:

[code]

Olha eu
[/code]

Tenho certeza que o codigo nao ficou bom mas…funciona.

Edit:

Dei uma pequena melhorada nele.

Edit2:

Mudei outra vez, acho que é assim que eles recomendam você a usar o JQuery.

#9

Agradeço muito e vou testar, qualquer duvida vou lhe perturbar.

Muito obrigado.

#10

É isso que o Sem_Nome disse, mas você pode melhorar ele no teu jquery mesmo:
Existem várias formas de fazer isso, uma delas é a que o Sem_Nome passou, que vou aproveitar :smiley:

&lt;script type="text/javascript" charset="utf-8"&gt;
           $(document).ready(function(){

                  $("#mostrar").click(function(){
                       $("#minhaDiv").show();
                  })

                  $("#esconder").click(function(){
                       $("#minhaDiv").hide();
                  })

           });
&lt;/script&gt;

&lt;div id="minhaDiv"&gt;  
     Div do Sem_Nome
&lt;/div&gt;  

&lt;input type="button" id="mostrar" value="Mostrar"&gt;  
&lt;input type="button" id="esconder" value="Esconder"&gt;

você atrela o evento do botão ao ID do componente, assim que ele é clicado, no ID do alvo, você realiza as operações que você quiser, aí facilita tudo =)

#11

Galera consegui o que estava querendo, mas para ficar perfeito falta apenas ser modal, que vai bloquear a pagina que fica por trás da div quando aberta.
Vou colocar o código se alguém puder ajudar agradeço.

<html>

    <head>

        <title>Teste Div</title>

        <style>
            #pop{
				display:none;
				position:absolute;
				top:50%;
				left:50%;
				margin-left:-150px;
				margin-top:-100px;
				padding:10px;
				width:300px;
				height:200px;
				border:1px solid #d0d0d0
				}
        </style>

    </head>

    <body>

        <div id="pop">

            <a href="#" onClick="document.getElementById('pop').style.display='none';">[Fechar]</a>

            <br />

            Aqui entra a tela de Cadastro

        </div>

        <input type="button" value="Cadastrar" onClick="document.getElementById('pop').style.display='block';" /> 

    </body>
    
</html>
#12

Da uma olhada nisso aqui:

[code]$(function() {
$( “#dialog:ui-dialog” ).dialog( “destroy” );
$( “#dialog-modal” ).dialog({
height: 140,
modal: true
});
});

Olha eu
[/code]

Qualquer duvida http://jqueryui.com/demos/dialog/#modal

#13