CSS
how to make a scroll using a DIV
by Bruno Rebelo on Feb.02, 2009, under CSS
just add this to your CSS:
.Scroll350 { height: 350px; overflow: auto; scrollbar-arrow-color: blue; scrollbar-face-color: #e7e7e7; scrollbar-3dlight-color: #a0a0a0; scrollbar-darkshadow-color: #888888 width: 700px; background-color: #DCDCDC; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr= '#DCDCDC' , EndColorStr= 'white' ); border: #84A3C1 1px solid; padding: 0; vertical-align: top; } |
in this example we are using a Gradient background for DIV.
Modal Popup
by Bruno Rebelo on Jan.20, 2009, under CSS, Javascript, OutSystems
function sm(obl, wd, ht) { var h='hidden'; var b='block'; var p='px'; var obol=$('ol'); var obbxd = $('mbd'); obbxd.innerHTML = $(obl).innerHTML; obol.style.height=pageHeight()+p; obol.style.width=pageWidth()+p; obol.style.top=posTop()+p; obol.style.left=posLeft()+p; obol.style.display=b; var tp=posTop()+((pageHeight()-ht)/2)-12; var lt=posLeft()+((pageWidth()-wd)/2)-12; var obbx=$('mbox'); obbx.style.top=(tp<0?0:tp)+p; obbx.style.left=(lt<0?0:lt)+p; obbx.style.width=wd+p; obbx.style.height=ht+p;inf(h); obbx.style.display=b; return false; } function hm(){ var v='visible'; var n='none'; $('ol').style.display=n; $('mbox').style.display=n; inf(v); document.onkeypress='' } function initmb(){ var ab='absolute'; var n='none'; var obody=document.getElementsByTagName('body')[0]; var frag=document.createDocumentFragment(); var obol=document.createElement('div'); obol.setAttribute('id','ol'); obol.style.display=n; obol.style.position=ab;obol.style.top=0; obol.style.left=0; obol.style.zIndex=998; obol.style.width='100%'; frag.appendChild(obol); var obbx=document.createElement('div'); obbx.setAttribute('id','mbox'); obbx.style.display=n; obbx.style.position=ab; obbx.style.zIndex=999; var obl=document.createElement('span'); obbx.appendChild(obl); var obbxd=document.createElement('div'); obbxd.setAttribute('id','mbd'); obl.appendChild(obbxd); frag.insertBefore(obbx,obol.nextSibling); obody.insertBefore(frag,obody.firstChild); window.onscroll = scrollFix; window.onresize = sizeFix; } window.onload = initmb |
css necessária :
/*Style de inicio para o panel wait*/ #mbox{ background-color:#eee; padding:8px; border:2px outset #666; } #mbm{ font-family:sans-serif; font-weight:bold; float:right; padding-bottom:5px; } #ol{ background-image: url(img/overlay.png); } .dialog { display:none; } * html #ol{ background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/overlay.png", sizingMethod="scale"); } /*Style de fim para o panel wait*/ |
é necessário uma imagem com efeito de transparencia.
A imagem usada no exemplo encontra-se disponivel aqui
Como usar ?
Basta criar uma div que tenha como class css dialog e colocar a infomação que pretende abrir em popup dentro da div.
para invocar a div :
botaoXPTO.Attributes["onclick"] = "sm('box',200,50);return false;"; |
