Form por baixo?

[Ivo Pereira]

Boas pessoal,

é o seguinte, queria que ao clicar no link adicionar, abrisse uma "popup" se assim lhe posso chamar, com um formulário de inserção de dados.

E como tal, fui à procura de uns "popups" bonitos. Não encontrei bem o que queria, mas de qualquer maneira fui tentar adaptar este.

O problema é que ao clicar em Adicionar, a tabela que está por baixo sobrepõe-se à "popup".. Porque será?  👍

Antes de clicar Adicionar:

Depois de clicar Adicionar:

http://i138.photobucket.com/albums/q266/DJ_BloodHunter/depois_adicionar.jpg[/img]

O código que estou a utilizar:

		<a class="button" onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' " >ADICIONAR </a>
<div id='PopUp' style='display: none; position: absolute;  border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 500px;'>
  <form action="addnoticia.php" method="POST">
    <h1 class="a">URL da miniatura:<br />
    <input type="text" name="thumbnail" size="75" maxlength="70" />
    </h1>
    <p class="a">Título:<br />
    <input type="text" name="title" size="55"  maxlength="50" />
    </p>
    <p class="a">Descrição:<br />
    <textarea rows="1" cols="55" name="description" onkeypress="return imposeMaxLength(this, 45);" ></textarea> 
    </p>
    <p class="a">Data:<br />
    <input type="text" name="date" size="16" value="<?php echo date("Y-m-d H:i:s"); ?>" readonly="readonly" />
    </p>
    <p class="a">URL do Youtube:<br />
    <input type="text" name="url" size="75" maxlength="70" />
    </p>
    <br />
    <input type="submit" value="Enviar notícia" />  <input type="reset" value="Apagar" />
    </form>
<br />
<div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">Cancelar</span></a></div>
</div>

O código veio daqui, apenas o adaptei:

http://codesnippets.joyent.com/posts/show/708

Cumpz

[IceBrain]

http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

[Ivo Pereira]

Obrigado 👍

Já agora, sabes como possa tratar uma div como se fosse uma janela à parte? Isto por exemplo, visto que tenho um formulário, queria mostrar nele mesmo o resultado do input, isto é, se o registo foi inserido ou não, mas sem sair da div.

[IceBrain]

Para isso, das duas uma: ou usas uma IFrame dentro da div, ou usas Ajax para actualizar o conteúdo (sendo que esta forma é a mais "limpa", imo).

Se usares a Prototype (framework Javascript), podes fazer isso num par de linhas usando o Ajax.Updater: http://www.prototypejs.org/api/ajax/updater

Nunca experimentei a prototype, mas há muita gente a usá-la.

[Ivo Pereira]

Para isso, das duas uma: ou usas uma IFrame dentro da div, ou usas Ajax para actualizar o conteúdo (sendo que esta forma é a mais "limpa", imo).

Se usares a Prototype (framework Javascript), podes fazer isso num par de linhas usando o Ajax.Updater: http://www.prototypejs.org/api/ajax/updater

Nunca experimentei a prototype, mas há muita gente a usá-la.

Ui... e eu agora entender-me assim do nada com AJAX é que é lixado 👍

Penso que me vou ficar pela Iframe..