<style type="text/css"> #cover{position:absolute;top:0px;left:0px;overflow:hidden;display:none;width:100%;height:100%;background-color:#000000;opacity:0.5;MozOpacity:0.5;zIndex:50;filter:alpha(opacity=50);text-align:center} #warning{margin:auto;position:relative;width:400px;height:200px;background-color:white;color:black;padding:10px;zIndex:100;} </style> <script type="text/javascript"> var vis=1; function cover() { var cover=document.getElementById('cover'); if(vis) { vis=0; cover.style.display='block'; } else { vis=1; cover.style.display='none'; } } </script>

<input type="button" onclick="javascript:cover();" value="Fade Now !!" /> <!-- หลักการคือ มันจะใช้สีพื้นหลังของหน้านั้นมาทำให้อ่อนลง และมันจะโปร่งใส ดังนั้นควรจะกำหนดตำแหน่งข้อความดีๆให้ไม่ทับกัน --> <div id="cover"> <div id="warning"> <br><br><br><br> <p align="center"><font face="MS Sans Serif" size="5" color="#0000FF">WELCOME TO MY WEBSITE</font></p> <p align="center"> <input type="button" onclick="javascript:cover();" value="กลับไปดูหน้านี้ต่อ"> <br><input type="button" onclick="javascript:location.href=('http://www.sanook.com/');" value="ฉันอยากไปดูเว็บไซต์ Sanook.com" /> </p> </div> </div>