Ir para conteúdo
Fórum Script Brasil
  • 0

criar botão


pmlv

Pergunta

ola a todos,

como faço para criar um botão em html que faça o seguinte:

Ao clicar, o botão irá abrir uma nova pagina tipo pop-up e automaticamente desaparecia.

imaginem um botão a dizer "clicar para fechar" e ao clicar nele o botão desaparecia mas abria uma janela popup

Se não der para fazer com um botoao podem me explicar como fazer por exemplo com uma imagem ou com texto tipo hyperlink

alguém me ajuda????

obg

Editado por pmlv
Link para o comentário
Compartilhar em outros sites

19 respostass a esta questão

Posts Recomendados

  • 0

Não entendi seria isso? Tipo tem o botão a pessoa clica e esse botão some só que uma pop-up se abre ...

Se sim veja esse pequeno exemplo:

<script>
function AbreEsconde(obj_button) {
 window.open("http://www.ig.com.br", "_janela", "width=500,height=50");
 obj_button.style.display = "none";
}
</script>

<form>
<input type="button" value="Clicar para Fechar" onClick="AbreEsconde(this);">
</form>

Editado por SK15
Link para o comentário
Compartilhar em outros sites

  • 0

SK15 é mesmo isso que queria.

Já agora da para colocar uma imagem e ao carregar no botao ele abre o popup e o botao e a imagem some????

o que quero ao certo é o seguinte: colocar uma imagem que ocupa um determinado local e quero que ao carregar no botao, este abra uma popup e quer ele quer a imagem desaparecem. é possivel?

obg

Editado por pmlv
Link para o comentário
Compartilhar em outros sites

  • 0

Esse linha é justamente para isso, para mostrar um objeto

obj_button.style.display = "none";
Veja esse exemplo
function hideElements(classe){
    var el = document.getElementsByClassName(classe)
    tam = el.length;
    for (var i = 0; i < tam; i++)
        el[i].style.display = 'block'
}

Esse código faz com que todos os elementos pertencentes a classe informada sejam escondidos. Testa aew, porque eu n testei. Ah, e para dar certo, você deve definir um mesmo class para cada elemento, no seu caso, para os dois elementos, a imagem e o botão.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

olá,

como faço para em vez de ser botao colocar uma imagem a abrir uma popup e depois sumir????

eu não percebo muito em mexer em código java

eu para agora tenho o seguinte codigo:

<script type="text/javascript">
function AbreEsconde(obj_button) {
window.open("http://www.google.pt", "_janela", "width=100,height=100");
obj_button.style.display = "none";
}
</script>
<div id="button" style="position:absolute; left:19px; top:178px; z-index:1; height:36px; width:327px">
    <input type="button" value="Clique aqui e ajude o site" onClick="AbreEsconde(this);" style="color: #FF0000; font-weight: bold; font-size:24pt; text-align:left"></div>

obg

Editado por Jonathan Queiroz
Adicionar tag's (Jonathan)
Link para o comentário
Compartilhar em outros sites

  • 0
olá,

como faço para em vez de ser botao colocar uma imagem a abrir uma popup e depois sumir????

</script>

<div id="button" style="position:absolute; left:19px; top:178px; z-index:1; height:36px; width:327px">

<input type="button" value="Clique aqui e ajude o site" onClick="AbreEsconde(this);" style="color: #FF0000; font-weight: bold; font-size:24pt; text-align:left"></div>

Olá caro pmlv.

Pelo que pude entender, você tem um fomulário, e quando o visitante clicar sobre o botão do formulário você quer que o botão desapareça da tela, agora porém você quer ao invés de um botão e um formulário seja uma imagemc, certo?

Primeiro defina uma classe para o elemento que quer esconder, nesse caso sua imagem. Como ela deve ser clicada pelo visitante para que seja aberta outra página, faça um link na sua imagem para que fique claro para o visitante do site que a imagem deve ser clicada:

<a href="outra_pag.html" target="_blank"> <img src="sua_pic.jpg" class="imgSome" /> </a>

Agora devemos fazer com que a imagem, após clicada, desapareça. Portanto utilizamos o javascript (mas acho que daria para utilizar css também com o atributo display: hidden....). Utilizando o código que o Rafael indicou, pegamos a classe criada para a sua imagem, verificamos suas dimensões e fazemos com que fique invisível a área que a imagem ocupa na tela, assim:

function imgEsconder(classe){ /*Onde classe é aquela que você criou na tag <img>*/

var el = document.getElementsByClassName(classe) /*Mesmo que no anterior. É o nome da classe que você criou para a sua imagem*/

tam = el.length; /* Verifica as dimensões da imagem*/

for (var i = 0; i < tam; i++)

el.style.display = 'block' /* Esconde sua imagem, tornando invisível o espaço que ela ocupa*/

}

Com a função criada, chamamos ela no evento onClick do link, seu código HTML ficará assim:

<a href="outra_pag.html" target="_blank" onClick="imgEsconder(classe)"> <img src="sua_pic.jpg" class="imgSome" /> </a>

Creio que seja isso. Aguardamos seu feedback.

Teh mais!

Link para o comentário
Compartilhar em outros sites

  • 0

É quase a mesma coisa .... só mudar um pouco que resolve :P

<script>
function AbreEsconde() {
 window.open("http://www.ig.com.br", "_janela", "width=500,height=500");
 document.getElementById("pop-image").style.display = "none";
}
</script>

<img src="image.jpg" border="0" id="pop-image" onClick="AbreEsconde();">

Link para o comentário
Compartilhar em outros sites

  • 0

Todo objeto de seu código HTML tem, ou pode ter um id, isso significa que o id, serve para identificar de forma única, ou seja, irrepetitível os objetos, então se você definir um para o tal iframe, e usar os métodos que foram passados para você para esconder objetos, pode ter certeza que isso acontecerá. Você precisa também usar sua lógica, nesse seu caso, você deve chamar uma function criada para esconder o objeto informado, função essa que será acionada quando você clicar nalgum link, certo? Então defina um evento e faça isso para todos os links. Akeleabrass. Se não entender poste aew.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

Na verdade, esses links você pode alterar sim meu amigo, você não pode alterar o HTML, mas os links, sim. Exemplo <a href="http://www.google.com.br" id='google' onclick="sua função">Google</a>.Entendeu?

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

sim já percebi.

Mas eu também não pretendo alterar os links, por enquanto. apenas quero que ao clicar num deles o iframe da pagina que os contem suma e que o respectivo link abra numa popup.

Para uma imagem este código deu bem

<script>
function AbreEsconde() {
window.open("http://www.ig.com.br", "_janela", "width=500,height=500");
document.getElementById("pop-image").style.display = "none";
}
</script>

<img src="image.jpg" border="0" id="pop-image" onClick="AbreEsconde();">

agora não consigo colocar a iframe.

como explicou <a href="http://www.google.com.br" id='google' onclick="sua função">Google</a>

"sua função" é neste caso o AbreEsconde? se sim como declaro o iframe??

obg

Link para o comentário
Compartilhar em outros sites

  • 0

Sim, "sua função" seria a "abreEsconde". No iframe você abrirá uma página que contém esses links de uma página que pertence a outra pessoa, aew você deseja abrir uma pop-up ao clicar num desses. É isso que entendi? Nesse caso, só existe uma solução que eu conheça, você cria sua própria página que contém esse link como no esquema que te mostrei anteriormente, do contrário esses links deveriam estar programados para fazer tal coisa.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

sim é +- isso que falou.

Rafael só uma pergunta para terminar.

Tenho 1 iframe. o iframe é uma pagina minha que tem uma imagem e que ao clicar na imagem ela desaparece e abre um popup. ate ai eu consigo. só não consigo fazer o seguinte: ao clicar na imagem abre um popup e a imagem desaparece só que o iframe ainda continua lá.

como faço para fechar esse iframe ao clicar na imagem que esta dentro desse iframe???

obrigada

Editado por pmlv
Link para o comentário
Compartilhar em outros sites

  • 0

sim rafael

por exemplo

<script>

function AbreEsconde() {

window.open("http://www.ig.com.br", "_janela", "width=500,height=500");

document.getElementById("pop-image").style.display = "none";

}

</script>

abre ao clicar na imagem abre uma popup e faz sumir a imagem. eu para fazer desaparecer o iframe ainda não consegui. ando as voltas com a funcao e não consigo.

podes ajudar?? podes colocar codigo de exemplo???

obg

Link para o comentário
Compartilhar em outros sites

  • 0

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Enviando texto</title>
<script>
function showHiddenByClass(classe) {
    var el = document.getElementsByClassName(classe)
    var tam = el.length
    window.open("http://www.ig.com.br", "_janela", "width='500'", "height='500'");
    for(var i=0; i < tam; i++)
        el[i].style.display = "none"
}
</script>
</head>
<body>
<img src="http://www.ig.com.br/" onclick="showHiddenByClass(this.className)" class="hidden" />
<iframe frameborder="0" scrolling="auto" class="hidden"></iframe>
</body>
</html>

Testa aew mocinha.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

olha Rafael não funciona.

eu coloco o codigo que disseste

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

<title>Enviando texto</title>

<script>

function showHiddenByClass(classe) {

var el = document.getElementsByClassName(classe)

var tam = el.length

window.open("http://www.ig.com.br", "_janela", "width='500'", "height='500'");

for(var i=0; i < tam; i++)

el.style.display = "none"

}

</script>

</head>

<body>

<img src="http://www.ig.com.br/" onclick="showHiddenByClass(this.className)" class="hidden" />

<iframe frameborder="0" scrolling="auto" class="hidden"></iframe>

</body>

</html>

aqui onde coloco o endereço do iframe que vai desaparecer???

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...