Janela Flutuante

[mruoppolo 14]

E aew galera do bem, tudo certo??

 

Estou precisando de mais uma forcinha, estou desenvolvendo um sistema de gerenciamento financeiro em PHP e criei uma calculadora bonitinha com interface e talz, porém eu tenho um botão que abre ela, a minha ideia é que quando alguém clique naquele botão abra a calculadora, sem ser um popup, eu preciso meio que de uma janela, tipo uma div flutuante que apareça na tela.

 

Não tenho a menor ideia de por onde começar, alguém tem um palpite???

 

Valew

 

Abraço

[Diéssica 140]

Pesquise por modal.

Particularmente, essas listas são interessantes:
:seta: http://smashingspy.com/32-best-jquery-popup-window-dialog-box-example/
:seta: http://www.jquery4u.com/windows/14-jquery-modal-dialog-boxes/

[mruoppolo 14]

É bacana esse negócio de modal, mas o ideal seria que ao mesmo tempo que a pessoa esta usando a calculadora ela pudesse continuar usando o site que esta atras da calculadora

[André do Vale 76]

Posicione então a calculadora numa camada (DIV) absoluta, e a posicione com o pai ou parente ascendente mais próximo que tenha posição relativa.

[Diéssica 140]

Posicione então a calculadora numa camada (DIV) absoluta, e a posicione com o pai ou parente ascendente mais próximo que tenha posição relativa.

Yep. :thumbsup: Inclusive, alguns plugins já oferecem essa opção no próprio, como o Messi (que é ótimo por sinal — :seta: http://marcosesperon.es/apps/messi). E outros nem funcionarão.

[mruoppolo 14]

André, como eu faço isso?? É utilizando o atributo position: relative algo assim?? Não sei fazer isso

[Diéssica 140]

Posicione então a calculadora numa camada (DIV) absoluta

position:absolute;

e a posicione com o pai ou parente ascendente mais próximo que tenha posição relativa.

position:relative;

 

Se HTML:

<div id="pai">
Elementos background
       <div id="mae">
       Calculadora
       </div>
</div>

Então CSS:

#pai {
     position:relative;
}
#mae {
     position:absolute;
}

 

:seta: http://maujor.com/tutorial/absrel.php

[mruoppolo 14]

Ah, achei esse messi é certinho o q eu preciso, é ele mesmo ;)

 

Muito obrigado Diéssica e André Campos

Só mais uma dúvida como eu faço pra essa div aparecer somente quando alguém clicar no botão calculadora, e como eu faço pra colocar um botão de fechar??

[Diéssica 140]

Se optou pelo Messi, tudo o que disse está na documentação do plugin.
:seta: http://marcosesperon.es/apps/messi/#usage

e como eu faço pra colocar um botão de fechar??

O Messi, assim como a maioria dos plugins que lhe indiquei, possui um botão de fechar. Dependendo de qual Messi utilizar, a caixa de diálogo apresenta o botão "Close" no conteúdo ou então, ao passar o mouse sobre a caixa, o botão aparece em forma de "X".

Para o seu caso, recomendo todos os "Simple message" ou até mesmo o Messi.load() (é bem simples e só precisa do arquivo, sem colocá-lo direto no código).

Existem algumas opções interessantes nessa parte, inclusive o autoplay, caso deseje.

Não esqueça de incluir o jQuery, CSS e o JS do plugin.