Excelente site com dicas simples e diretas de como usar (e criar) com janelas modais no Bootstrap.
Inclui exemplos de modal sobre modal, modal em posições diferentes, com barra de rolagem, entre outras.
O causo:
Para uma campanha de entidade beneficente local nos feita a seguinte encomenda:
Será promovida uma festa beneficente, para a qual serão vendidos ingressos, com o objetivo de adquirir uma ambulância para a entidade. A proposta: Colocar na página inicial do site da entidade uma ambulância em preto e branco e, na medida, que forem sendo vendidos os ingressos, no total de 10 mil, a ambulância vai colorindo-se.
Apesar de extremamente simples, não encontramos algo do tipo em nossas pesquisas, assim vamos à solução:
Usar duas imagens sobrepostas, um PB outra colorida, formatadas via CSS, com alterações dinâmicas via jQuery.
Esta é a imagem inicial, com 0% de preenchimento:
Seguida da função que faz a variação:
function colore() { /*ATENÇÃO: Função não otimizada, para efeitos didáticos! */ //captura o tamanho da imagem: largura=$('#imagem').width(); altura=$('#imagem').height(); //valor (em percentual) do campo: percentual=parseInt($('#valor').val(),10); //valida o dado recebido, se for inválido, assumirá 50(%) if(percentual) { if(percentual<0||percentual>100) {percentual=50;}; } else {percentual=50}; //calcula o tamnho da imagem, conforme o percentual: largura_sobreimagem=parseInt(largura*percentual/100); altura_sobreimagem=parseInt(altura*percentual/100); //atribui o valor à sobreimagem: css_sobreimagem="clip:rect(0px,"+largura_sobreimagem+"px,"+altura_sobreimagem+"px,0px)"; $('#imagem').css({"clip":"rect(0px,"+largura_sobreimagem+"px,"+altura_sobreimagem+"px,0px"}); /* No caso, a sobreimagem varia na vertical e na horizontal, apenas para demonstrar as possibilidades do efeito, na prática, foi usado somente na horizontal para melhor visualização. No estilo acima, a imagem já começa como "meio colorida" apenas para efeito demonstrativo */ }; |
Chegando a este resultado:
Pronto, simples e rápido.
Aqui os arquivos para download: .imagem_sobre_imagem
(A imagem da ambulância é promocional da FIAT/Ducato)