Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou fazendo um site que disponibiliza textos na web, e o usuários pode comentar o texto, tipo no imasters.
Minha idéia era:
Clicou no botão para comentar, abre uma div 100% que sobrepõe o conteúdo com transparência, e sobre ele um outro div com os campos do form e textos com dicas para os campos.
No FF ta 100%, mas no IE ta uma IEca...
Segue o link pra ter uma idéia:
/ EDIT /
O problema nao esta em esconder, mas em mostrar no IE, se a página tem rolagem o IE ignora, e só mostra o div no topo e nao ta 100% ...
Vejam o link.
position : fixed;_position : absolute;Já tentei todas as possibilidades e não consegui ...
Deixa o DISPLAY DEFAULT e o POSITION como ABSOLUTE.Se não funcionar tenta criar essa DIV com Javascript DOM na hora que for exibir!!!
Isso já esta, por isso postei o link, pra poder ver o código./**/O problema nao esta em esconder, mas em mostrar o div.
Já tentou fuçar no código do lightbox? Eu acho que pra ficar toda a tela mesmo soh com JS...[]'s
Ta, mas com js eu não vou mudar apenas mudar o style do elemento?
Pra fazer isso que você quer não precisa nem trabalhar com a propriedade DISPLAY, só POSITION e VISIBILITY resolve.
Esse é o teu código HTML adaptado, com uma DIV de teste que preenche a tela toda no IE, FF e Opera.
<script> function abrir(){ var a = document.getElementById('d1'); a.style.visibility = 'visible'; } function fechar(){ var a = document.getElementById('d1'); a.style.visibility = 'hidden'; }</script><html><head></head><body><div style="position:absolute;width:100%;height:100%;background-color:#11bbcc;visibility:hidden;" id=d1> <input value=FECHAR type=button onclick=fechar(); /></div> <input type=button onclick=abrir(); value=ABRIR /><table width="700" height="100%" border="0" align="center" cellpadding="0" cellspacing="10" bgcolor="#FFFFFF"> <tr> <td id="TITULO"><strong><font size="2">TEXTOS</font></strong></td> </tr> <tr> <td valign="top" id="CONTEUDO"> <h1><div id="DATA">01/01/2001</div> <div id="NOME">TITULO</div> </h1> <div id="SCORE">10</div> <div id="VIEWS">50</div> <div id="TEXTOS">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce congue. Proin justo mi, convallis quis, ornare a, malesuada ut, dui. Pellentesque vel eros. Cras aliquam. Proin id nibh a velit ultricies congue. Etiam massa ligula, pellentesque eu, gravida eu, mollis ut, pede. Donec aliquet eros eget metus. Etiam scelerisque tristique sapien. Phasellus egestas pede quis augue commodo ultricies. Duis erat. Nullam aliquet urna quis dolor. Fusce placerat pulvinar mauris. Vestibulum sit amet ante. Maecenas feugiat diam eu purus. Duis ac nulla adipiscing dui bibendum pulvinar. In ante pede, tempor at, porta vitae, vehicula id, leo. <p>Aliquam varius, lorem vitae rhoncus sodales, magna arcu aliquet velit, non ultricies justo lorem a sem. Ut vel justo. Vivamus a erat a libero rutrum scelerisque. Pellentesque eu enim. Maecenas sagittis, ante non vehicula vulputate, velit lacus condimentum sem, ut porta magna ipsum id dolor. Morbi varius dignissim nulla. Vestibulum rutrum tincidunt elit. Vivamus sapien. Morbi at sem ut dolor congue tempor. Nulla ornare, lectus ac tincidunt aliquet, tellus mi vulputate nibh, ac egestas dui justo quis felis. Cras ac nisi a nulla ullamcorper interdum. Vestibulum a urna vel nibh gravida consectetuer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Duis commodo orci. Quisque et mi congue risus nonummy tincidunt. Integer luctus turpis. Nunc rhoncus nisl ac nisl. Nulla bibendum arcu nec est sodales porta. Proin at lorem. Nulla id risus. Quisque et erat. Proin consequat laoreet leo. Morbi vitae risus. Ut justo erat, tempor ac, auctor at, consectetuer venenatis, dolor.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur pede dui, tristique a, blandit suscipit, viverra et, eros. Aenean interdum lacus a nisi. Nullam sit amet tellus. Sed porta, ligula vel luctus gravida, dui quam ultricies nisi, a tincidunt ante eros et nisi. Ut est tellus, dapibus iaculis, sollicitudin vitae, placerat quis, tellus. Quisque nec eros eget arcu tempus scelerisque. Aenean tristique lorem ac ligula. Mauris porta nisi ac felis. Donec tempor accumsan mauris. Fusce metus neque, iaculis nec, rutrum ac, bibendum a, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque malesuada. Vestibulum eu odio. Nulla placerat, elit ac feugiat elementum, mauris tellus accumsan risus, et tincidunt nisl dui quis dui. Quisque porta, nibh et varius ultrices, libero nisl porta mi, quis consectetuer dui lorem eu quam. Sed ut velit ut felis sodales luctus. </p> <p>Cras arcu nisl, porta non, dignissim in, scelerisque malesuada, eros. Nullam id augue. Donec venenatis. Vestibulum nibh risus, volutpat ut, tempor nec, placerat nec, tellus. Donec nisi massa, imperdiet vel, sagittis ut, scelerisque ac, leo. Duis sapien sapien, vehicula sit amet, imperdiet pretium, elementum nec, orci. Nulla libero. Aenean accumsan ante in est. Mauris vehicula dolor at purus sollicitudin molestie. Donec mattis, velit a viverra dignissim, urna lacus semper ipsum, sed aliquam dui elit a nisi. Duis a nisl. Quisque eget ligula ut massa suscipit tristique.</p> </div> </td> </tr> <tr> <td id="FEATURES"><div id="VOTE"><a href="javascript:;" onClick="LYR_ShowHelp('', 'AL_COMENT')">Comentar</a></div></td></tr> <tr><td id="COMENTS"><div class='ncoment'>[ 14/05/2007 14:38:05 ] <strong>Ricardo Gil</strong><br> <em>djlhnfo aio nmkpo jijiha<br /><br />sa dpifjpijfioajpjm opiuh omhj jap<br />a sgfk ampokm paokmgk</em></div><div class='ncoment'>[ 14/05/2007 14:37:40 ] <strong>Ricardo Gil</strong><br> <em>djlhnfo aio nmkpo jijiha<br /><br />sa dpifjpijfioajpjm opiuh omhj jap<br />a sgfk ampokm paokmgk</em></div><div class='ncoment'>[ 14/05/2007 14:33:23 ] <strong>Ricardo Gil</strong><br> <em>aaa<br />bbb</em></div><div class='ncoment'>[ 14/05/2007 14:32:18 ] <strong>Ricardo Gil</strong><br> <em>teste<br />testaaa</em></div><div class='ncoment'>[ 14/05/2007 14:24:30 ] <strong>Ricardo Gil</strong><br> <em>1<br />2</em></div> </td></tr> <tr> <td height="1" align="center"><input name="voltar" type="button" value="« voltar" onClick="history.back();"> </td> </tr></table></body></html>Sem usar o DISPLAY!
Eu comecei igual, mas role a página vertical, o div nao fica com 100%, dai fui mudando ate chegar onde esta hj.
A DIV fica 100% na tela e não na página, nem no FF você faz isso... a diferença é que o FF permite layout FIXO e o IE não...
E pra você não repetir oq é obvio, ja deixo claro que eu sei que o seu protótipo exibe o conteúdo atrás da tranparencia da DIV...
Mas como quem não tem colírio usa óculos escuro, da pra fazer tranquilo jogando o conteúdo pra memória via Javascript/DOM e recuperando depois.
<script> var cloneNode; function getChild(node){ for(i=0; node.childNodes.length;i++){ if(node.childNodes[i].nodeType == 1) return node.childNodes[i] } } function abrir(){ var a = document.getElementById('d1'); var b = document.getElementById('d2'); a.style.visibility = 'visible'; cloneNode = b.cloneNode(true); b.removeChild(getChild(b)); } function fechar(){ var a = document.getElementById('d1'); var b = document.getElementById('d2'); a.style.visibility = 'hidden'; b.appendChild(cloneNode); } </script><html><head></head><body><div style="position:absolute;width:98%;height:96%;background-color:#11bbcc;visibility:hidden;" id=d1> <input value=FECHAR type=button onclick=fechar(); /></div> <input type=button onclick=abrir(); value=ABRIR /><div id="d2"> <table id="t1" width="700" height="100%" border="0" align="center" cellpadding="0" cellspacing="10" bgcolor="#FFFFFF"> <tr> <td id="TITULO"><strong><font size="2">TEXTOS</font></strong></td> </tr> <tr> <td valign="top" id="CONTEUDO"> <h1><div id="DATA">01/01/2001</div> <div id="NOME">TITULO</div> </h1> <div id="SCORE">10</div> <div id="VIEWS">50</div> <div id="TEXTOS">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce congue. Proin justo mi, convallis quis, ornare a, malesuada ut, dui. Pellentesque vel eros. Cras aliquam. Proin id nibh a velit ultricies congue. Etiam massa ligula, pellentesque eu, gravida eu, mollis ut, pede. Donec aliquet eros eget metus. Etiam scelerisque tristique sapien. Phasellus egestas pede quis augue commodo ultricies. Duis erat. Nullam aliquet urna quis dolor. Fusce placerat pulvinar mauris. Vestibulum sit amet ante. Maecenas feugiat diam eu purus. Duis ac nulla adipiscing dui bibendum pulvinar. In ante pede, tempor at, porta vitae, vehicula id, leo. <p>Aliquam varius, lorem vitae rhoncus sodales, magna arcu aliquet velit, non ultricies justo lorem a sem. Ut vel justo. Vivamus a erat a libero rutrum scelerisque. Pellentesque eu enim. Maecenas sagittis, ante non vehicula vulputate, velit lacus condimentum sem, ut porta magna ipsum id dolor. Morbi varius dignissim nulla. Vestibulum rutrum tincidunt elit. Vivamus sapien. Morbi at sem ut dolor congue tempor. Nulla ornare, lectus ac tincidunt aliquet, tellus mi vulputate nibh, ac egestas dui justo quis felis. Cras ac nisi a nulla ullamcorper interdum. Vestibulum a urna vel nibh gravida consectetuer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Duis commodo orci. Quisque et mi congue risus nonummy tincidunt. Integer luctus turpis. Nunc rhoncus nisl ac nisl. Nulla bibendum arcu nec est sodales porta. Proin at lorem. Nulla id risus. Quisque et erat. Proin consequat laoreet leo. Morbi vitae risus. Ut justo erat, tempor ac, auctor at, consectetuer venenatis, dolor.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur pede dui, tristique a, blandit suscipit, viverra et, eros. Aenean interdum lacus a nisi. Nullam sit amet tellus. Sed porta, ligula vel luctus gravida, dui quam ultricies nisi, a tincidunt ante eros et nisi. Ut est tellus, dapibus iaculis, sollicitudin vitae, placerat quis, tellus. Quisque nec eros eget arcu tempus scelerisque. Aenean tristique lorem ac ligula. Mauris porta nisi ac felis. Donec tempor accumsan mauris. Fusce metus neque, iaculis nec, rutrum ac, bibendum a, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque malesuada. Vestibulum eu odio. Nulla placerat, elit ac feugiat elementum, mauris tellus accumsan risus, et tincidunt nisl dui quis dui. Quisque porta, nibh et varius ultrices, libero nisl porta mi, quis consectetuer dui lorem eu quam. Sed ut velit ut felis sodales luctus. </p> <p>Cras arcu nisl, porta non, dignissim in, scelerisque malesuada, eros. Nullam id augue. Donec venenatis. Vestibulum nibh risus, volutpat ut, tempor nec, placerat nec, tellus. Donec nisi massa, imperdiet vel, sagittis ut, scelerisque ac, leo. Duis sapien sapien, vehicula sit amet, imperdiet pretium, elementum nec, orci. Nulla libero. Aenean accumsan ante in est. Mauris vehicula dolor at purus sollicitudin molestie. Donec mattis, velit a viverra dignissim, urna lacus semper ipsum, sed aliquam dui elit a nisi. Duis a nisl. Quisque eget ligula ut massa suscipit tristique.</p> </div> </td> </tr> <tr> <td id="FEATURES"><div id="VOTE"><a href="javascript:;" onClick="LYR_ShowHelp('', 'AL_COMENT')">Comentar</a></div></td></tr> <tr><td id="COMENTS"> <div class='ncoment'>[ 14/05/2007 14:38:05 ] <strong>Ricardo Gil</strong><br> <em>djlhnfo aio nmkpo jijiha<br /> <br /> sa dpifjpijfioajpjm opiuh omhj jap<br /> a sgfk ampokm paokmgk</em></div> <div class='ncoment'>[ 14/05/2007 14:37:40 ] <strong>Ricardo Gil</strong><br> <em>djlhnfo aio nmkpo jijiha<br /> <br /> sa dpifjpijfioajpjm opiuh omhj jap<br /> a sgfk ampokm paokmgk</em></div> <div class='ncoment'>[ 14/05/2007 14:33:23 ] <strong>Ricardo Gil</strong><br> <em>aaa<br /> bbb</em></div> <div class='ncoment'>[ 14/05/2007 14:32:18 ] <strong>Ricardo Gil</strong><br> <em>teste<br /> testaaa</em></div> <div class='ncoment'>[ 14/05/2007 14:24:30 ] <strong>Ricardo Gil</strong><br> <em>1<br /> 2</em></div> </td></tr> <tr> <td height="1" align="center"><input name="voltar" type="button" value="« voltar" onClick="history.back();"> </td> </tr> </table></div></body></html>Fiz de qq jeito e usei qq variável, se servir pra você adapta isso e transforma em uma CLASSE...
PS: É Crossbrowser, funciona no IE, FF e Ópera...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strinct.dtd">http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Div posição fixa</title> <style type="text/css">html{ overflow: hidden;}body{ overflow: auto; font: 76% verdana, arial, sans-serif;}html,body{ height: 100%; margin: 0px; padding: 0px;}.transparencia{ position: fixed !important; position: absolute; top: 0px; left: 0px; z-index: 10; width: 100%; height:100%; -moz-opacity : 0.6; opacity: 0.6; color: #000000; background-color: #E0E0E0; }*.transparencia{ filter: alpha(opacity = 60);}</style></head><body> <div id="div1" class="transparencia"></div> <p>asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /> asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /></p></body></html>
Ahhh muleke ... É casca qnd você procura uma solução e fica só nela, nem tenta fazer de outra maneira, chega uma hora que trava.Não tinha nem pensado em fazer isso.Valeu vagner.net !!
1 solução já é boa, 2 então!!!hunternh, sua solução funcionou perfeitamente, já adaptei e esta 100%.Mas o mais importante, pq funcionou?Fiquei com algumas duvidas tipo:- Pq declarar 2 vezes o position?- Pq declarar separado o filter:alpha?
Em relação ao position é o seguinte:
position: fixed !important; -> navegadores complacentes
position: absolute; -> já da pra saber pra quem...
e o filter separado foi por gosto mesmo.
Agora o motivo principal por ter funcionado está aqui:
html{ overflow: hidden;}body{ overflow: auto; font: 76% verdana, arial, sans-serif;}
Faça alguns testes modificando o overflow para ver o que acontece.
Show!Tks All
hunternh,Surgiu outro problema, estou usando isso em outro projeto que possui background no body, dai ele esta fixando o bg e rolando o conteudo./**/O problema acima eu não resolvi, mas mas consegui o resultado que queria tirando o bg do html e colocando num div ...O problema agora é, se eu usar um div com width:100% o scroll some ...
A propriedade POSITION da DIV está como ABSOLUTE?