Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Henrique Barcelos

Alerts e Confirms personalizados

Por , em Javascript

Recommended Posts

Henrique Barcelos    290

Henrique Barcelos
Postado

Boa noite galera...

 

Estava desenvolvendo essa classe para um sisteminha interno e me lembrei da intensa busca neste fórum por alerts e confirms personalizados...

 

Histórico de Versão

 

* Versão 0.1 Beta

Versão sem todos os testes possíveis, funciona bem no Firefox 3.5, Chrome, Opera e IE8, mas não totalmente nos IE7-

 

http://www.megaupload.com/?d=A7AYYV0D

 

 

* Versão 0.2

Foram corrigidos os problemas com IE7-

 

http://www.megaupload.com/?d=IR1RVSKM

 

 

* Versão 0.3

Agora é possível criar os elementos de dentro de um iFrame na janela principal, muito útil em upload de arquivos

 

http://www.megaupload.com/?d=8X8I19J9

 

Em breve, a documentação...

 

Pré-requisitos:

 

*jQuery 1.3.2 + instalada

 

Já existe um skin padrão dentro da pasta skins...

Para usá-lo, basta incluir no CSS na sua página

 

<link rel="stylesheet" href="caminho/para/a/pasta/myOverlay/skins/default/default.css" type="text/css"/>

Para utilizar:

//Não precisa ser no evento onload, pode ser em qualquer evento, aqui é só para demonstração
window.onload = function(){
 var overlay = new myOverlay();
 overlay.alert("ALGUMA MENSAGEM");
}

O código ainda não está documentado, mas quem conhece um pouco de Javascript OO não vai ter problemas em adequar para seu uso...

 

Se você quer só exibir alerts e confirms personalizados, não precisa mudar nada...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Deives    0

Deives
Postado

Bacana Rick... estou testando e está dando um erro, não sei se o erro é meu veja:

<html>
<head>
<title>Teste</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="myOverlay.js"></script>
<script type="text/javascript">
var overlay = new myOverlay();
overlay.alert("ALGUMA MENSAGEM");
</script>
<link rel="stylesheet" href="skins/default/default.css" type="text/css"/>
</head>
<body>
Teste
</body>
</html>
Erro (Firebug): document.body is null -> this.width = document.body.scrollWidth;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Você não pode usar assim diretamente, tem que colocar dentro do evento onload ou de $(function(){}) da jQuery...

 

Faça:

window.onload = function(){
    var overlay = new myOverlay();
    overlay.alert("Teste");
}

Mais uma coisa: inclua sempre os arquivos css antes dos javascripts...

 

_____________________________________________________

 

Editei o tópico, upei a versão 0.2. A 0.1 Beta não exibia os alerts corretamente no IE7-

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito