Compare Page Revisions
« Older Revision - Back to Page History - Newer Revision »
sm
DIV
<html> <head> <!-- The JavaScript and CSS files are expected to be in the same directory as the HTML file. --> <script type="text/javascript" src="modaldbox.js"></script> <link rel="stylesheet" href="modaldbox.css" type="text/css" /> </head> <body> <!-- The HTML for the "dialog" --> <div id="box" class="dialog"> <div style="text-align:center"><span id="txt">Press OK to continue.</span> <br /> <button onclick="hm('box');">OK</button></div> </div> <!-- The "Click Me" button triggers the dialog. --> <input type='button' value='Click Me (absolute)' onclick="sm('box', 200, 50);" /> <input type='button' value='Click Me (percent)' onclick="smpct('box', 90, 90);" /> </body> </html>
modaldbox.js
// Modal Dialog Box // copyright 8th July 2006 by Stephen Chapman // http://javascript.about.com/ // permission to use this Javascript on your web page is granted // provided that all of the code in this script (including these // comments) is used without any alteration function pageWidth() { return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth: document.body != null ? document.body.clientWidth:null;} function pageHeight() { return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;} function posLeft() { return typeof window.pageXOffset != 'undefined' ? window.pageXOffset: document.documentElement && document.documentElement.scrollLeft? document.documentElement.scrollLeft: document.body.scrollLeft? document.body.scrollLeft:0;} function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement && document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop? document.body.scrollTop:0;} function $(x){return document.getElementById(x);} function scrollFix(){ var obol=$('ol');obol.style.top=posTop()+'px';obol.style.left=posLeft()+'px'} function sizeFix(){ var obol=$('ol');obol.style.height=pageHeight()+'px';obol.style.width=pageWidth()+'px';} function kp(e){ky=e?e.which:event.keyCode;if(ky==88||ky==120)hm();return false} function inf(h) {tag=document.getElementsByTagName('select');for(i=tag.length-1;i>=0;i--) tag[i].style.visibility=h;tag=document.getElementsByTagName('iframe');for(i=tag.length-1; i>=0;i--)tag[i].style.visibility=h;tag=document.getElementsByTagName('object');for(i= tag.length-1;i>=0;i--)tag[i].style.visibility=h;} 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 smpct(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 = '0px'; obol.style.left = '0px'; obol.style.display = b; //obol.style.border = 'solid 1px red'; obol.style.verticalalign = 'middle'; obol.style.marginleft = 'auto'; obol.style.marginright = 'auto'; var obbx = $('mbox'); var leftPos = pageWidth() * (100 - wd) / 200; obbx.style.width = wd + '%'; obbx.style.height = wd + '%'; obbx.style.left = leftPos + 'px'; obbx.style.marginright = 'auto'; //obbx.style.border = 'solid 2px #ff00ff'; 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;
modaldbox.css
#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(overlay.png); } .dialog { display: none } * html #ol { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); }
overlay.png
ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.